Crossbrowser onbeforeunload?

Question

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

@Šime Vidas, did not found anything useful in https://github.com/jquery/jquery/blob/master/src/event.js :( — powtac, Sep 12 '11 at 14:54
`onbeforeunload` is in that script. Use CTRL + F to search... — Šime Vidas, Sep 12 '11 at 15:01
@powtac : do you need to add a custom message on last alert ? — Aelios, Oct 16 '13 at 07:38
MSDN says it's supported on IE9+ http://msdn.microsoft.com/en-us/library/ff974336(v=vs.85).aspx — Adriano, Sep 11 '14 at 07:22
see browser support of `onbeforeunload` WindowEventHandler on https://developer.mozilla.org/en-US/docs/WindowEventHandlers.onbeforeunload#Browser_compatibility — Adriano, Sep 11 '14 at 07:25
I've got a clean solution working cross browser please accept my answer — Jacek Pietal, Feb 13 '15 at 21:50
@powtac, I think Aelios went above and beyond to answer your question and to stay engaged on this question as you let the years roll past. Are you really still "testing" or just not willing to accept an answer? — adam0101, Jun 08 '17 at 14:15

Aelios · Answer 1 · 2014-12-05T08:43:46.783

15

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

edited Dec 05 '14 at 08:43

answered May 30 '12 at 08:03

Aelios

11,849
2
36
54

What does it mean `not seem to catch onbeforeunload event` the native onbeforeunload event if there is one? – powtac May 30 '12 at 11:33
In fact, Opera does not know onbeforeunload event, that's all – Aelios May 31 '12 at 10:13
on Chromium, this pops up a confirm dialog for me. However, if I `return null`, then it doesn't. – K3---rnc Dec 06 '12 at 05:46
1

Cool solution! if you want add a link back from Github to this discussion, to keep the knowledge in this discussions connected... – powtac May 12 '14 at 12:29
@Aelios, will this cause browsers like Opera to fire the `onbeforeunload` event before unloading? – KyleMit Nov 03 '14 at 22:28
@KyleMit : I do not have any solution for Opera yet, as it does not implement `onbeforeunload` event. – Aelios Dec 05 '14 at 09:09
cross-browser solution for IE 11, Edge, Chrome and Firefox ? – Kiquenet Dec 11 '18 at 16:13

score 6 · Answer 2 · edited May 23 '17 at 12:18

6

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?

edited May 23 '17 at 12:18

Community

1
1

answered Sep 22 '11 at 13:45

Ian Stanway

610
8
25

Yes it does. The OP asked "Does window.onbeforeunload() fire in all browsers?" and my answer is "it's not supported in mobile browsers". – Ian Stanway Dec 05 '14 at 17:00
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – J Santosh Oct 24 '15 at 05:37
2

Whilst I agree generally, in this case my answer does include the essential parts of the linked article (not supported in mobile browsers), plus I am linking to SO so there is no danger of the link becoming invalid. – Ian Stanway Nov 06 '15 at 12:14

Jacek Pietal · Answer 3 · 2015-02-13T22:03:18.490

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

score 1 · Answer 4 · answered Sep 12 '11 at 14:37

1

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.

answered Sep 12 '11 at 14:37

Brad Christie

100,477
16
156
200

Given it's a microsoft product, [MSDN](http://msdn.microsoft.com/en-us/library/ms536907%28v=vs.85%29.aspx) would be a great place to start. – Brad Christie Sep 12 '11 at 14:39
Yes I saw this page already, but I don't see any information about the support of IE versions on it, or do I miss something? – powtac Sep 12 '11 at 14:41
1

@powtac: I believe it goes pretty far back (though I remember issues arising in IE8 with this event). You can also [test for support](http://stackoverflow.com/questions/158673/onbeforeunload-support-detection) and bind when found and default when absent. – Brad Christie Sep 12 '11 at 14:44

score -6 · Answer 5 · answered Sep 12 '11 at 14:38

-6

Then you can use both like this :

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

answered Sep 12 '11 at 14:38

Tushar Ahirrao

12,669
17
64
96

3

But browsers which support both events will execute things twice. – pimvdb Sep 12 '11 at 14:45
@pimvdb..then use one flag ..if its true then excute function, once it is executed then make it false. – Tushar Ahirrao Sep 12 '11 at 14:54
2

This answer is too raw. Needs explanation, as it is, it's not very helpful. – Ruan Mendes Sep 12 '12 at 17:18
A function with a var to check if it already fired would be alright here. – Someone Nov 08 '16 at 17:23

Crossbrowser onbeforeunload?

5 Answers5

Linked

Related