Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 277
Dan Herbert Avatar asked Sep 26 '08 15:09

Dan Herbert


2 Answers

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);
like image 98
Magnus Ottosson Avatar answered Oct 23 '22 11:10

Magnus Ottosson


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

like image 27
rmoorman Avatar answered Oct 23 '22 12:10

rmoorman