108

In JavaScript, what are window.opener, window.parent, and window.top, and when can I use them?

zcoop98
  • 2,590
  • 1
  • 18
  • 31
Sriram
  • 2,909
  • 8
  • 27
  • 35

4 Answers4

179
  • window.opener refers to the window that called window.open( ... ) to open the window from which it's called
  • window.parent refers to the parent of a window in a <frame> or <iframe>
  • window.top refers to the top-most window from a window nested in one or more layers of <iframe> sub-windows

Those will be null (or maybe undefined) when they're not relevant to the referring window's situation. ("Referring window" means the window in whose context the JavaScript code is run.)

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • 2
    Thanks @pointy for the response. I've a main page which opens a child using `window.open()` upon page submit. Now this child window open another child window with the same `window.open()` closing self. Now when I submit my second child (first child is no more exists), I would like to access the page elements of my main page. Is this possible from second child when the first is no more present? – Sriram Jul 03 '12 at 14:40
  • 4
    @Sriram: That's the kind of information you need to put in your question, so that people know what problem you're *really* trying to solve. – josh3736 Jul 03 '12 at 14:42
  • 5
    @Sriram you'll have to grab `window.opener.opener` before the intermediate page goes away. – Pointy Jul 03 '12 at 15:00
26

Basic information about these things can be found on MDN:

window.opener

I've used window.opener mostly when opening a new window that acted as a dialog which required user input, and needed to pass information back to the main window. However this is restricted by origin policy, so you need to ensure both the content from the dialog and the opener window are loaded from the same origin.

window.parent

I've used this mostly when working with <iframe>s that need to communicate with the window object that contains them.

window.top

This is useful for ensuring you are interacting with the top level browser window. You can use it for preventing another site from iframing your website, among other things.

There are a few ways you can handle your situation.
You have the following structure:

  • Main Window
  • Dialog 1
    • Dialog 2 Opened By Dialog 1

When Dialog 1 runs the code to open Dialog 2, after creating Dialog 2, have dialog 1 set a property on Dialog 2 that references the Dialog1 opener.

So if "childwindow" is you variable for the dialog 2 window object, and "window" is the variable for the Dialog 1 window object. After opening dialog 2, but before closing dialog 1 make an assignment similar to this:

childwindow.appMainWindow = window.opener

After making the assignment above, close dialog 1. Then from the code running inside dialog2, you should be able to use window.appMainWindow to reference the main window's window object.

zcoop98
  • 2,590
  • 1
  • 18
  • 31
Mark At Ramp51
  • 5,343
  • 1
  • 25
  • 30
  • Thanks @Mark for the response. I've a main page which opens a child using `window.open()` upon page submit. Now this child window open another child window with the same `window.open()` closing self. Now when I submit my second child (first child is no more exists), I would like to access the page elements of my main page. Is this possible from second child when the first is no more present? – Sriram Jul 03 '12 at 14:41
7

top, parent, opener (as well as window, self, and iframe) are all window objects.

  1. window.opener -> returns the window that opens or launches the current popup window.
  2. window.top -> returns the topmost window, if you're using frames, this is the frameset window, if not using frames, this is the same as window or self.
  3. window.parent -> returns the parent frame of the current frame or iframe. The parent frame may be the frameset window or another frame if you have nested frames. If not using frames, parent is the same as the current window or self
Ravish
  • 2,428
  • 2
  • 18
  • 24
1

when you are dealing with popups window.opener plays an important role, because we have to deal with fields of parent page as well as child page, when we have to use values on parent page we can use window.opener or we want some data on the child window or popup window at the time of loading then again we can set the values using window.opener

Dungeon Master
  • 95
  • 1
  • 9