Javascript, Controlling An Onbeforeunload Tag

I'm trying to set up a onbeforeunload tag to stop a user from leaving specific pages if and only if they have unsaved content, and only on specific pages (we're using a single mast

Solution 1:

Not sure if this is as designed, but if you return null from the event handler, you might get the results you want:

window.onbeforeunload = function() {
    var el = document.getElementById("dirtyFlag");
    if (el.value === "true") {
        return'You will lose all changes made since your last save';

    }
    else {
        returnnull;
    }
};

The following works in FF: http://jsfiddle.net/andrewwhitaker/chZJ8/. Try changing the hidden inputs value to "true" and you should start getting the confirmation dialog. However, I cannot get it to work in Chrome and I'm unable to test in IE. It would be great if someone could confirm this works in either of those browsers.

Edit: Adding another example that's easier to use and works in Chrome (the iFrame in JSFiddle was causing issues). Check out the example here: http://andrewawhitaker.com/examples/onbeforeunload_test.html. Type 'true' in the input to see a confirmation. If 'true' is not the value of the input, no dialog is displayed. Works in FF and Chrome, still can't vouch for IE.

Update 2: A more reliable way of doing this is probably to add and remove the event listener when you set the value for dirtyFlag programmatically, just remove or add the event handler appropriately:

var isDirty = function() { ... };
if (/* form is dirty*/) {
    window.onbeforeunload = isDirty;
}
else {
    window.onbeforeunload = null;
}

Solution 2:

You can't change the default behavior of onbeforeunload.

https://developer.mozilla.org/en/DOM/window.onbeforeunload

http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx