I've got a question about CSS based popup windows, like those generated by jQuery UI's dialog system, or Colorbox. If I use those (or something like them) to open a popup window to an HTML page and that page has Javascript in it, does the Javascript in the popup window run in its own context, or does it become part of the context of the Javascript in the parent window that opened it? I ask so that I can write the Javascript on both pages (parent and popup) so there is no namespace collision.
Thanks in advance!
Doug
That depends on the type of popup. (I'm assuming we are talking about in-page popups here and not window.open() ones that open a new browser window.)
If it contains an IFRAME in which you load a separate page, then that page will have its own styles. You will have to re-load any CSS and JavaScript files you need.
If it doesn't contain an IFRAME, but just a regular DIV or other element into which content is loaded through AJAX (or directly output in the "parent" HTML page) then the popup will run in the context of the parent page.
If you use real popups (new windows) it is definitly in its own context.
If you use modal windows purely in HTML it depends. It can be an iframe (own context) or injected elements (parent context).
With Colorbox, you can set the iframe property to true and it will load the content in an iframe. This gives the page its own scope. If you don't use an iframe, then the page will be loaded in the context of the current document.
$('a.someLink').colorbox({ href:"somePage.html", iframe: true });
Related
I have a popup window, and from there, I want the parent window to reload, but a specific frame not the entire page.
So a user clicks a button from within a frame, it opens the popup. Now from the popup, based on a specific event, I want to reload a frame from the parent window.
Is this possible in IE?
I have a page index.php that has 2 iframes in it.
From the 2nd iframe a new popup window opens.
When the user clicks on a button or closes the popup window, I want to reload iframe#2 (the one that opened the window).
How can I do this?
I have tried:
opener.location.reload();
opener.top.document.getElementById('myIFrameId').location.reload()
opener.myIFrameId.location.reload();
Nothing seems to work.
I found a great jQuery plugin that works in all modern browsers, including IE8.
It allows you to easily call up a secondary browser window with parameters and then your allowed to pass data between the two, similar to how postMessage API works.
These data messages in turn can load new content or alternate webpage into the original iframe2 that's on your parent page once you analyze the incoming jQuery data.
Article: jQuery plugin for communication between browser windows
Online Demo: Parent Page
Download Project: windowmsg.zip
The downloaded files will work directly from your desktop, unlike jsFiddle since it's not permitted there.
Yet another solution that works great when you don't need a secondary browser window and the use of a floating iframe is acceptable, just use a lightbox clone that's iframe capable, such as Shadowbox-js.
The benefit of this method is that your in complete control of how the iframe closes, unlike the above secondary browser window that has it's own browser close button which may not trigger your desired events.
The callback during the lightbox clone closure event can take care of changing the contents in the parent pages iframe 2 as needed. Also, you can choose to have the lightbox bound within the iframe 2 (lightbox clone installed in iframe page), or have it fullscreen (lightbox clone installed in parent page).
In your case, window.opener is the window object of the iframe that opened the popup, so opener.location.reload() should work: Demo
Demo sources:
Main page: http://jsfiddle.net/jefferyto/DWeYZ/
Iframe: http://jsfiddle.net/jefferyto/WWbg9/
Popup: http://jsfiddle.net/jefferyto/TKQUJ/
I kind of rebuilt this functionality here:
http://jsfiddle.net/JBWTn/3/
Clicking the button in the popup will change the border look of a frame in the original window . The key here is navigating through the original window's frames using
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]')
(quite similar to what Frank van Puffelen suggested)
To reload the frame instead of just changing its style, use
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]').location.reload()
...like you tried in your question already.
This question reminded me of the functionality in phpMyAdmin (where you can run SQL queries from a popup window and have the results shown in the main window), so I had a quick look ;)
Have you tried:
opener.frames["myIFrameId"].location.reload();
it will show error "Error: Permission denied to access property 'reload'"
that's possibly "the same origin policy" problem.
or you create a div wrapper over the iframe and re generate iframe again
I have one page(say jobs.html) with an iframe loads another page( say joblist.html).There is one another popup(which displays description of job when clicks one title) which is generated with javascript will be load into the page in iframe when it loads.
I have to load the popup(job description popup) outside the iframe.
Any solution to get the jobs.html page's document body using javascript?
or How can i get this popup outside the iframe?
Thanks,
You can use the parent function.
You can define the function of showing the popup on the parent page. not in iFrame and call that function from iFrame.
Lets suppose you have a function of showing job description in Parent page.
var showJobDesc = function(jobTitle,jobDesc,...){
....
}
now in iFrame call this function like;
parent.showJobDesc(jobTitlem, jobDesc, ...);
By doing this you have no issues for placement/alignment of the Dialog.
I have to load the popup(job description popup) outside the iframe
What do you mean when you say load the popup outside the iframe?
If you want to open the other page in a pop up, use window.open
If you want to open the new page replacing the parent's page, use the location of the window
window.parent.location.href = "newPage.html"
In general, you can refer to the parent window (the window containing the iframe), use window.parent (and therefore the parent window's document as window.parent.document, and any script in the parent window as window.parent.scriptName)
Put the show javascript into container page, and in the iframe just call parent.showpopup().
parent.showpopup() throws an access denied error. Kinda makes sense since including an iframe means the developer of the page can control the page it's contained in.
I got stuck in a problem here. I have a fancybox inside an iFrame, and it works normally, but I need it to extend outside the iFrame so it can fill the whole screen (I mean extend to it's parent).
Does anybody knows how to do that?
If both the page and the iframe are in the same domain, you can open the fancybox window in the parent from inside the iframe. Check out the demo.
Parent Window (contains fancybox script, css and iframe)
<iframe src="child-page.htm" height="250" width="500"></iframe>
Child Page (contains script to call fancybox in the parent)
$('a').click(function() {
// target the parent window (same domain only)
// then call fancybox in the parent
// You can add any HTML you want inside the fancybox call
window.parent.$.fancybox('<img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" height="333" width="500">');
});
It's not possible. Iframes are independent pages and can only interact to the parent via JavaScript, and even then it's shady behavior.
Your fancybox cannot extend out of the iframe no matter what you do, but with some work you could call to one on the parent page via JavaScript.
This post will answer your question in both directions (parent -> iframe, iframe -> parent): Invoking JavaScript code in an iframe from the parent page
As a side note, iframes fell out of vogue about 5 years ago. I'd avoid them in any new production.
Cheers. :)
I want to open a remote url inside a javascript popup instead of doing window.open().
I came across libraries like lytebox,lightbox,thickbox which do that if the popup is opened from main webpage.
However my requirement is to open the popup from the link which occurs in a small iframe within the main page.( I can not alter the code of the main page, however Iframe webpage is fully in my control)
When I include those libraries in my iframe webpage, it opens the popup, but restricted only
to within iframe.How to make it appear over whole browser window ?
This is what i want : The user clicks on "click here" and it opens a javascript layer,not
restricted to within iframe.
you can just use
parent.document
from the iframe to access the parent window, if it is from the same domain. Otherwise, security concerns are raised.
You can inject the javascript by creating a script element in the parent's document, and then will be able to access the necessary functions.
Hey there you lot, is there a way that I can open a lightbox (in this case iBox) from within an IFRAME and have the actual lightbox open in the Parent page?
sigh I am confusing myself here!
Only if you have control of the parent page too.
If so you could either invoke methods directly using parent.foo() if on the same domain, or using e.g easyXDM if on different domains.
Either way, you will have to load the correct scripts and css on the parent to do so.