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

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

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

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.

top, parent, opener (as well as window, self, and iframe) are all window objects.
window.opener -> returns the window that opens or launches the current popup window.
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.
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

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

Related

How know if a window can be closed with js

So as it has been discussed elsewhere, a window can be closed by js using window.close() only if it has been opened by a script.
I have a page that offers a button to open a discussion window. The discussion window opens to a new tab with window.open(). The discussion page has a button that calls window.close(), which closes the discussion window and takes you back to previous tab, so you can continue from where you left off.
The problem is that if someone takes a the url directly to the discussion window, the close button does not work.
Is there a way to detect if the window will be closable with window.close(), so I can show the button only if it will work?
You can check to see if window.opener is not null:
When a window is opened from another window, it maintains a reference
to that first window as window.opener. If the current window has no
opener, this method returns NULL. Windows Phone browser does not
support window.opener. It is also not supported in IE if the opener
is in a different security zone.
You can try using the window.opener object, which returns a reference to the window that opened the current window (if it's another window), or NULL if the current window was not opened via JS.
if (window.opener) //Show button

How to create a pop up browser window that contains a GUI and controls a parent browser window

Is there a way in jquery and/or javascript to create a pop up window that can directly effect a parent window in a browser? In my case I want to set up a GUI in the pop up which can move objects in the parent window left/right/up/down. I also need this to work in a dual monitor setting. Any leads on how to do this would be great!
Functions in the child window can control the parent window by using parent. for example:
parent.alert("moo");
You can use window.opener to interact with the opening window, since it sounds like you want to open a new window. So if you have a javascript function declared in the opening window as
function test(){
alert("I'm the parent!");
}
you can call it from a popup window by calling
window.opener.test();
The requirement here is that both the opening window and the open window must be either in the same domain or at least subdomain. If it is the same subdomain, a little work is needed to allow the cross-domain access, which you can read more about here https://stackoverflow.com/a/3962489/1558122.
You would initially open the popup of course by calling window.open from the parent, and dual monitor should not affect the behavior here.
What you really want is probably a dialog, not a window. Windows are cumbersome and require all the HTML a document requires. You could try this jquery plugin: http://jqueryui.com/dialog/ . A dialog requires minimal HTML.
I confess I don't know about the dual-monitor thing.

window.opener issue with window.open() when replacing a window

I have a web application where page #1 opens a popup window using
window.open(myUrl, "fixedApplicationTargetId", "");
Then page #2 overwrites the same popup window with a call to window.open using the same target value
window.open(anotherUrl, "fixedApplicationTargetId", "");
At this point the content of the popup originally created by page #1 shows the new content created by page #2. So far so good with any browser.
Then the popup itself detects who last opened the popup and updated the content using window.opener. Prior to calling window.open both page #1 and page #2 create a global variable globalPageId and assign a unique number each. The popup checks the value of window.opener.globalPageId and detects which window last updated the popup content.
This is where things fall apart: the above works fine with chrome and firefox that update window.opener in the popup each time the content is updated with window.open. Instead, IE and opera always point the popup window.opener to the first window that used window.open.
Any suggestion, in a context where multiple pages call window.open on the same target, how to detect from the popup itself which window last opened the window?
window.opener is supposed to be read-write (except in Internet Explorer 3), so you could set it to the appropriate window yourself. Some browsers, however, restrict this operation and only allow setting opener to null to prevent security issues.
An alternate solution would be to use a custom property instead of opener. You could set it by hand:
window.open(myUrl, "fixedApplicationTargetId", "").realOpener = window;
Then use window.realOpener.globalPageId instead of window.opener.globalPageId in the rest of your code.

Window to Window Communication in js by window name

Is there anyone who can give me some thoughts on how to handle window to window communication using javascript givin that the two windows has no parent child relationship. Basically the other window is opened using window.open method. Any brilliant information is well appreciated.
assuming the following:
windowHandle=window.open('path/to/document');
you can interact between both windows.
You have a pointer to the window-object from the document where it was opened from using the variable-name:
//doSomething has to be known inside the new window
windowHandle.doSomething();
and from the document inside the new window to the window that opened the new window, using the opener-property:
//doSomething has to be known inside the window that opened the new window
opener.doSomething();

What's different when a page is opened by window.showModalDialog?

Anyone knows the difference?
The problem I met is that the page stops working correctly when opened by window.showModalDialog
window.showModalDialog vs window.open
Window.open will open up a new window through Javascript, with the URL and other features of the window that u pass as parameters. Here the parent window which opens the new window and the child window are independent windows.
Eg. Below
`window.open('winOpen.htm','name','height=255,width=250,toolbar=no,directories=no,status=no,
linemenubar=no,scrollbars=no,resizable=no');`
Window.showModalDialogue again works smilar to a window.open only diffrence being its a Modal window, It opens up as a new window but doesnt allow the user to access the parent window, unless you explicitly close it.
Here the child window is dependent on the parent window. If you close the parent window the child would also get closed.
window.showModalDialog("xpopupex.htm","name","dialogWidth:255px;dialogHeight:250px");
ShowModalDialogue windows can be used when u want the user to perform a particular action in the new window before he access the parent window again. like login before he can access the parent page..
tryed to make it as simple as possible...hope this help.. ;)

Categories