Crossbrowser onbeforeunload?

2019-01-01 11:44发布

问题:

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

回答1:

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



回答2:

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?



回答3:

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



回答4:

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.



回答5:

Then you can use both like this :

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