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.
I want a page that open child window. The child window will be redirect to other website for processing. The other website will send the result to our server by redirect on the child window.our server will process the result and return to parent window and close the child window. Can it be done and how?
You use window.open method to open a child window and store the returned reference to interact with it later.
You use the window.parent property from the child window to access the parent window.
Here is an article demonstrating the approach.
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
For my web application I need to close the child window whenever the parent window is closed. By "closed" I mean that the browser window is actually closed, not just navigated to a new page.
I have seen the "How can I close the child window if the parent window is closed?" question already, but mine is an extension on that. The answer to that question solves the problem of closing the child window on any unload event of the parent. However unload != close (IMO); just clicking on a link triggers the unload event.
Since there isn't an "onclose" event in JS, I decided that the best method is on the parent's unload event setTimeout on the child to see if it's parent still exists and close if not:
var w = window.open("", "Logger", "height=480,width=640,resizeable,scrollbars=yes");
if (w) {
JSEvents.on(window,'unload',function(){
if (w && !w.closed) {
w.setTimeout(function(){
//IE this==w.opener
if (!w.opener || w.opener.closed) {
w.close();
}
},500);
}
});
}
However, I believe that I have pretty conclusively shown that in IE(7) you cannot use setTimeout during the unload event on either the parent or child window. In the above example this == w.opener inside of the setTimeout anonymous function. This test never produces an alert:
JSEvents.on(window, 'unload', function(){
window.setTimeout(function(){alert('HERE');},500);
});
A straight alert without the setTimeout will produce the alert.
Is there a trick to setting a setTimeout on the child from the parent that I can use?
Is there another method for detecting when the parent is closed that I can use?
It is much easier to do in FF, so I am focusing on getting this to work under IE.
Is there a trick to setting a setTimeout on the child from the parent that I can use?
You can't do it with code from the parent in IE. When IE closes a window, the members you defined from code inside it are gone, and references to those members (such as the child's timeout pointing to your function) are left dangling. Depending on what version of IE you've got, maybe nothing will happen, or maybe you'll get a “can't execute code from a freed script” error.
You can do it inside the child. The parent could set a flag on the child onunload (eg. w.parentUnloaded= true) which a setInterval poller on the child could check for, and close itself —
if (window.parentUnloaded && (!window.opener || window.opener.closed))
Is this an IE bug? Well... other browsers react differently to unloaded scripts, certainly. But there is no standard that says what is supposed to happen here. Even within the same browser series, behaviours change as browsers are updated to avoid cross-context scripting issues.
With stuff like this and event timing issues(*), cross-window scripting is much more difficult to get right than it looks. It's generally best avoided; if you can put your ‘pop-ups’ in divs in the main page, it is usually better to do that.
(*: there are cases(**) where an event can be fired in one window and execute whilst JavaScript in another window is still in the process of running. So window ‘a’ could call a method on window ‘b’ and have that execute whilst other code in window ‘b’ is still in progress. This can dramatically confuse the scripts in window ‘b’, if they are written under the normal JavaScript assumption that there is only one thread of execution active at once. This is why I suggest using the poller in the child rather than having the parent explicitly call the child. In the future we will use HTML5's postMessage method to avoid these problems.)
(**: You could very well argue that this should never happen, and it certainly is weird, but it does happen in many browsers, in particular when modal dialogues are involved or some versions of the IE Sun Java plugin are in use.)
You can't just leave pop-up windows lying around after the application is closed; it's just not polite.
Some would say the impoliteness was opening the pop-ups in the first place. ;-)
It would seem to me that it would make sense to close any child windows when the parent is left, regardless of whether the user was closing the window, or just navigating back to his home page, or a bookmark, or typing an address, or something. Personally I'd probably want to lose the child windows on a refresh too, if I'm trying to ‘reset’ the application to a beginning state.
If you have multiple documents the parent is going to be navigating between which are all part of the same application and should not close the children, you're making things really hard for yourself! :-) However you could adapt the above ‘child window if’ approach to try to sniff the opener.location and see if that's within your application to decide whether to close or not. The trick is if the opener had been navigated to a different domain, the access would throw a security exception, so you'd have to wrap the location access up in a try...catch block that also closed the windows if the opener location was unreadable.
bucabay wrote (and Anthony something similar):
The browser considers the window closed once you refresh or close the window. So as far as the child is concerned, it's opener is gone once you refresh the parent.
That's very sensible and logical. Browsers probably should have one ‘window’ per document like that. But try it — they don't. A child pop-up retains access to its opener (and, as long as that opener is a document in the same security context, the contents of the opener), over a refresh of the opener, in IE/FF/Op/Saf/Chr.
In pop up window: (this works if the opener is closed OR changes domains)
var int = window.setInterval(function(){
// On opener domain change, all browsers throw an error. Lets use that error to our advantage using try/catch:
try
{
if(opener && typeof opener.document != 'undefined')
{
// Adding this variable fixes IE8. Why? Because F U thats why.
var openerRef = window.opener.location.host;
}
else{
// Loads the survey when opener is closed
window.location = 'exit-survey.jsp';
}
}
// Loads the survey if an error throws (error throws when opener changes domain)
catch(err)
{
window.location = 'exit-survey.jsp';
}
}, 500);
})
Have you tried creating the function inside the opened window like this:
window.closeWithParent = function() {
if (!window.opener || window.opener.closed) {
window.close();
}
};
window.parentClosing = function() {
window.setTimeout(window.closeWithParent, 500);
};
Then from your parent window:
JSEvents.on(window,'unload', function() {
if (w.parentClosing) w.parentClosing();
});
I'm not sure, but I think that interfacing with the window object across windows might be causing the problem you are seeing. Also, this way the setTimeout is called in the child windows scope (hopefully) instead of your parent window, which is being unloaded (this losing any timeouts).
The problem is from the browsers perspective a window is a concept which is created to display the content of a document. When you navigate from that document to another that window is closed and a new one is created.
The fact that the browsers conceptual windows are hosted by an actual client window owned by the browser and that client window may be re-used to display subsequent documents isn't actually any of your business (if you don't mind the phrase).
Its how the browser chooses to display the content, that window having a close button that may be potentially clicked by the user is outside of what most browsers consider that any host document needs to know.
Hence any trick you might invent to circumvent this now, if it works at all, may be closed by tighter security in later versions of a browser.
My advice would be to drop this requirement.
The browser considers the window closed once you refresh or close the window. So as far as the child is concerned, it's opener is gone once you refresh the parent.
So you cannot test if a window just refreshed, or opened another instance on that same domain using JavaScript references. (such as window.opener)
You can however create indirect references to other windows and save them in any browser storage that is cross window, or even server storage. Having the storage reflect the state of the window will allow other windows to observe that window even though they do not have a reference.
You could use cookies, or DOM Storage etc. I have a library that uses cookies (it was written a year ago when DOM storage was not supported - FF2+, IE8+ I think). If you want to see it as an example, I can do that.
Anyway, what you can do is keep a piece of data that represents the parent window. Keep it updated at regular intervals, and poll it from the child.
Example with cookies:
// parent
setInterval(function() { setCookie('parent_alive', new Date()) }, 1000);
// child
setInterval(function() { if (readCookie('parent_alive') < new Date()-5000) window.close() }, 1000)
Here the child will close 5 seconds after the parent does not update the cookie "parent_alive". The main problem is that internet connection may prevent a page from loading for 5 seconds, by which the child thinks it was closed. So it is a balancing act.
Note the polling is quite efficient if you use session cookies since they stay in memory. However, if you use persistent cookies you will probably be hitting the disk which would suck.
It seems that the correct way to add a script into the child window's scope is to use the DOM to create the script tag. The following code works to check if the parent window is open still a quarter second after it unloads in IE.
var w = window.open("", "Logger", "height=480,width=640,resizeable,scrollbars=yes");
if (w) {
JSEvents.on(window,'unload',function(){
if (w && !w.closed) {
var srpt = w.document.createElement('script');
srpt.type = 'text/javascript';
srpt.text = 'window.setTimeout(function(){if(!window.opener||window.opener.closed){window.close();}},250);';
w.document.body.appendChild(srpt);
}
});
}
Thanks for everyone's help in pointing me in this direction. The solution was just figuring out how to dynamically insert a new script tag with text content instead of a src.
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.. ;)