window.onbeforeunload not firing in child window

Question

I want to bind a function to the beforeunload event of a child window in Javascript. I have the following code:

newWind = window.open(settings.url, "Dialog", "width=" + settings.width + ",height=" + settings.height + ",resizable=" + settings.resizable + ",scrollbars=" + true);

newWind.onunload = function() { alert('test'); }

Works fine in Firefox, but fails in IE7. Can anyone see what I am doing wrong?

Answer 1

newWind.onunload = function() { alert('test'); }

IE won't let you assign a function from one window context to another window's on[before]unload, for some reason. You can assign a foreign function to other event handlers, including newWind.document.body.onunload, but it's not a good idea.

Firstly because IE's garbage collection is window-based so if you close or navigate the opener window, the pop-up will try to execute a dead function, or function with dead variables in scope, resulting in weird JavaScript errors.

And secondly because you don't know from the opener when the popup document is loaded enough to be able to set the handler. At the point just after the open call, the popup document may not have started loading at all, in which case you can't safely set any event handlers on it. So you would need a short delay before setting the onunload handler, and the user might close the window in that time. And the opener doesn't know how long to delay; instead, the child dialog would have to call the parent back to tell it it's ready. Better to have the child pop-up take charge of receiving its own events and calling the opener to let it know about them.

Cross-window scripting has endless pitfalls. Try to avoid it wherever possible. For dialogs always use in-page elements, which are much more reliable and less annoying than window popups.

Answer 2

I'm using the following hack to find out when the child window was closed :

function checkChildWindow(win, onclose) {
    var w = win;
    var cb = onclose;
    var t = setTimeout(function() { checkChildWindow(w, cb); }, 500);
    var closing = false;
    try {
        if (win.closed || win.top == null) //happens when window is closed in FF/Chrome/Safari
        closing = true;        
    } catch (e) { //happens when window is closed in IE        
        closing = true;
    }
    if (closing) {
        clearTimeout(t);
        onclose();
    }
}

function openWindow(url) {  
    ...
    var wnd = window.open(url, "window_name", "[...flags...]");
    checkChildWindow(wnd, function() { alert('child was closed!'); } );
    ...
}