3

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.

Samuel Edwin Ward
  • 6,526
  • 3
  • 34
  • 62
loyalflow
  • 14,275
  • 27
  • 107
  • 168
  • "Popup window" as in a new instance of IE or a modal on a web page? – Popnoodles Jan 04 '13 at 22:15
  • created via javascript, window.open(...) – loyalflow Jan 04 '13 at 22:37
  • You can get to the parent window from your popup through the `opener` variable. From there you can either look up the iframe with `getElementById`, find all iframes using `getElementsByTagName` or use the `window.frames` property. Where are you stuck on this path? – Frank van Puffelen Jan 05 '13 at 14:07
  • @FrankvanPuffelen I tried: window.opener.document.getElementById('myIFrameID').reload(); but I get an error saying: Uncaught TypeError: Cannot call method 'getElementById' of undefined – loyalflow Jan 07 '13 at 21:32
  • 1
    Are both the popup and main window coming from the same domain? If not, you are hitting the browser's security model. If that is what you're hitting, Google that "same origin policy" or "XSS" since there are a lot of great explanations of it out there already. – Frank van Puffelen Jan 07 '13 at 22:06
  • @user1361315, Does [**this image**](http://i.stack.imgur.com/Q3IjA.png) give good representation of what your trying to achieve, more or less? If so, I have two methods that I describe in my answer for you. Cheers! – arttronics Jan 08 '13 at 06:26
  • Also, be aware of issues when using Chrome Frame for your IE: https://groups.google.com/forum/?fromgroups=#!topic/google-chrome-frame/ – saschoar Jan 10 '13 at 21:05

5 Answers5

2

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).

Community
  • 1
  • 1
arttronics
  • 9,957
  • 2
  • 26
  • 62
2

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:

Jeffery To
  • 11,836
  • 1
  • 27
  • 42
0

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 ;)

saschoar
  • 8,150
  • 5
  • 43
  • 46
0

Have you tried:

opener.frames["myIFrameId"].location.reload();
Kernel James
  • 3,752
  • 25
  • 32
0

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

Kotzilla
  • 1,333
  • 18
  • 27