Crossbrowser onbeforeunload?

38
votes

Does window.onbeforeunload() fire in all browsers? I need a onbeforeunload functionality which is supported at least by IE6 and FF3.6.

For IE, onbeforeunload() seems only to be supported by IE9

5
javascriptcross-browseronbeforeunload
@Šime Vidas cool! Thanks that code will be very useful! - powtac
@Šime Vidas, did not found anything useful in github.com/jquery/jquery/blob/master/src/event.js :( - powtac
onbeforeunload is in that script. Use CTRL + F to search... - Šime Vidas
@powtac : Have you finished your tests ? - Aelios
@powtac : take your time and ask, if you need help - Aelios

5 Answers

14
votes

I found a workaround for Firefox with setTimeout function because it does not have the same behaviour as other web browsers.

window.onbeforeunload = function (e) {
    var message = "Are you sure ?";
    var firefox = /Firefox[\/\s](\d+)/.test(navigator.userAgent);

    if (firefox) {
        //Add custom dialog
        //Firefox does not accept window.showModalDialog(), window.alert(), window.confirm(), and window.prompt() furthermore
        var dialog = document.createElement("div");
        document.body.appendChild(dialog);
        dialog.id = "dialog";
        dialog.style.visibility = "hidden";
        dialog.innerHTML = message; 
        var left = document.body.clientWidth / 2 - dialog.clientWidth / 2;
        dialog.style.left = left + "px";
        dialog.style.visibility = "visible";  
        var shadow = document.createElement("div");
        document.body.appendChild(shadow);
        shadow.id = "shadow";       
        //tip with setTimeout
        setTimeout(function () {
            document.body.removeChild(document.getElementById("dialog"));
            document.body.removeChild(document.getElementById("shadow"));
        }, 0);
    }

    return message;
}

GitHub: https://github.com/Aelios/crossbrowser-onbeforeunload

5
votes

No it does not fire in all browsers. It's not supported in mobile browsers e.g. Safari, Opera Mobile & mini, Dolphin. See Is there an alternative method to use onbeforeunload in mobile safari?

2
votes

Building upon Tushar Ahirrao solution this works cross browser and triggers once (Works in Firefox, Chrome, whatever)

<html>
<head>
<script type="text/javascript">
var app = {};
app.unloaded = false;
app.unload = function() {
    if (app.unloaded) return; else app.unloaded = true;
    // your code here
    return "YO";
};
</script>
</head>
<body onunload="return app.unload();" onbeforeunload="return app.unload();">
YO
</body>
</html>

Paste above template to empty file then edit it

1
votes

It's my recollection that IE was the only browser to implement onbeforeunload, but some browsers have taken it upon themselves to implement it.

Long story short, IE is about the only browser (with very finite exceptions) you'll find this event consistently in.

-6
votes

Then you can use both like this :

<body onunload="functionName();" onbeforeunload='functionName();' >