Crossbrowser onbeforeunload?

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

Answers:

Answer

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

Answer

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?

Answer

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

Answer

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.

Answer

Then you can use both like this :

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.