How would I raise an event (jQuery or standalone Javascript) when a popup window is closed?

Question

I want to raise an event when a popup window is closed, or preferably, just before closing. I'm storing the popup window object as an object, but I don't know of any way to bind to the close event, or an event just before the window is closed.

var popupWindow = window.open("/popup.aspx", "popupWindow", "height=550,width=780");

Is there any way to subscribe to the close event using jQuery, or just raw javascript? I'm using jQuery and can't add another library, so if it can't be done in jQuery I'll have to roll my own event system somehow so that it will work across all browsers.

UPDATE:
I've tried using the unload event in jQuery and for some reason the event is raised as soon as my popup opens instead of when it is closed. If I use Firebug to set a breakpoint to delay the unload event from being subscribed to, the unload event works the way it is supposed to, but for whatever reason, it doesn't work correctly when the javascript is allowed to execute naturally.

var popupWindow = window.open("/popup.aspx", "popupWindow", "height=550,width=780");
$(popupWindow.window).unload(function() { alert('hello'); });

Does anybody have any idea as to why the unload event could be raised when the window is loading?

One other catch is that I've noticed that jQuery's "unload" event does not stay subscribed to the window like it normally does if I just do:

popupWindow.onunload = function(){alert('hello')};

It seems to unsubscribe from the event every time it is raised. Is this supposed to happen? If it weren't for this bug (or feature?) in jQuery, it would by fine to have the event get raised on load since I can check the popupWindow.closed property inside of the event to ensure the window was really closed.

Answer 1

Use window.onUnload

Answer 2

You'd have to have the onBeforeUnload event call a method to notify your handler.

See this page for a demo.

http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm

Answer 3

The jQuery code example for the unload event

$(window).unload( function () { alert("Bye now!"); } );

From the jQuery unload documentation

Edit:

I played around and was not able to get the parent window to be able to set the unload. The only way I could get it to work, was by having the script present in the popup window html. The popup window also needed to load jQuery. I have nothing to base this on, but I believe the unload is being triggered, because essentially the popup window is being unloaded from the scope of the parent window. Just a guess.

Answer 4

There's one tiny catch I have to mention in relation to the previous mentions of onunload based on my previous experience:

Opera 9.0.x-9.2.x only runs window.onUnload if the user navigates away from a page. If the user instead closes the window, the event will never fire. I suspect this was done to combat the self-reloading popup problem (where a popup could reopen itself on page close).

This has most likely persisted to Opera 9.5.x. Other browsers may also implement this, but I don't believe IE or Firefox do.

Answer 5

From what I checked the jQuery unload is just a wrapper for the native function. I could be wrong as I didn't dug that deep.

This example worked for me.

$(document).ready(function(){
    $(window).unload( function (){
        alert('preget');
        $.get(
            '/some.php',
            { request: 'some' }
        );
        alert('postget');
    });
});

Remember that some browsers block the window.open requests on unload, IE for example.

Answer 6

I created a watcher that checks if the window has been closed:

var w = window.open("http://www.google.com", "_blank", 'top=442,width=480,height=460,resizable=yes', true);
var watchClose = setInterval(function() {
    if (w.closed) {
     clearTimeout(watchClose);
     //Do something here...
    }
 }, 200);

Answer 7

I tried the watcher approach but ran in to the "permission denied" issue while using this in IE6. This happens due to the closed property not being fully accessible around the event of closing the window ... but fortunately with a try { } catch construction it works though :o)

var w = window.open("http://www.google.com", "_blank", 'top=442,width=480,height=460,resizable=yes', true);

var watchClose = setInterval(function() {
    try {
        if (w.closed) {
            clearTimeout(watchClose);
            //Do something here...
        }
    } catch (e) {}
}, 200);

Thank you magnus