Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When to use window.opener / window.parent / window.top

In JavaScript when to use window.opener / window.parent / window.top ?

like image 528
Sriram Avatar asked Jul 03 '12 14:07

Sriram


People also ask

What is the parent window?

The Window. parent property is a reference to the parent of the current window or subframe. If a window does not have a parent, its parent property is a reference to itself. When a window is loaded in an <iframe> , <object> , or <frame> , its parent is the window with the element embedding the window.

What does window Opener do?

opener. The Window interface's opener property returns a reference to the window that opened the window, either with open() , or by navigating a link with a target attribute. In other words, if window A opens window B , B.

What is window parent postMessage?

The window. postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

What is window top?

window. top returns the topmost window in the hierarchy of windows. window. parent returns the immediate parent of a window.


2 Answers

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

like image 108
Pointy Avatar answered Nov 07 '22 03:11

Pointy


I think you need to add some context to your question. However, basic information about these things can be found here:

window.opener https://developer.mozilla.org/en-US/docs/Web/API/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 https://developer.mozilla.org/en-US/docs/Web/API/Window.parent

I've used this mostly when working with IFrames that need to communicate with the window object that contains them.

window.top https://developer.mozilla.org/en-US/docs/Web/API/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.

If you add some more detail to your question, I can supply other more relevant examples.

UPDATE: 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, window object.

Hope this helps.

like image 21
Mark At Ramp51 Avatar answered Nov 07 '22 02:11

Mark At Ramp51