Why onbeforeunload event is not firing

Question

I tried the code on Chrome, FireFox and Safari. Still the onbeforeunload does not fire. I also tried the onunload, but it did not work.

Here is the code I am experimenting with:

<!doctype html>
<html lang="en">
<head>
  <title> Output to a Page </title>
  <meta charset="utf-8">
  <script> 
    window.onload = init;
    window.onclick = clk;
    window.onbeforeunload = closing;
    function clk() {
        window.alert("Ouch !!");
    }
    function closing() {
        console.log("function alrt WORKS !!!!");
        window.alert("closing now.....");
    }
    function init() {  
      var output = "";
      for (var mms = 5; mms > 0; mms--) {
        if (mms >= 3) {
            output += "Still lots of M&amp;Ms left, so eat more!<br>";
        } else {
            output += "Getting low on M&amp;Ms, take it easy!<br>";
        }
      }
      output += "All out of M&amp;Ms";
      var e = document.getElementById("output");
      e.innerHTML = output;
    }

  </script>
</head>
<body>  
  <p id="output"></p>
</body>
</html>

Marek Wysmułek · Answer 1 · 2020-05-26T15:19:13.627

Onbeforeunload is subject of one of bigest missunderstanding in the webdevelopers world :D

1) It refuses to call all blocking native functions (alert, prompt, confirm). It is obvious from User perspective.

2) it (according to MDN) should be registered by "addEventListener" (MDN)

3) It is fired only if there was ANY interaction of the user with the site. Without ANY interaction (even one click anywhere) event onbeforeunload won't be fired.

4) The aim of this event IS eg. secretly saving data left in forms (or else) on behalf of user (or logging user behavior etc.). It is NOT for blocking refreshing the site !

Thus there is no way (because it would be for nothing) to show personalised information.

The only sens is to hide the prompt window while reloading with prior saveing data.

5) If you want to hide the prompt window just NOT set any value for the event.returnValue field.

This example unload site (writing on console text "UNLOAD:1") without window prompt during refresh.

window.addEventListener("beforeunload", function(event) {
  console.log("UNLOAD:1");
  //event.preventDefault();
  //event.returnValue = null; //"Any text"; //true; //false;
  //return null; //"Any text"; //true; //false;
});

This example unload site (writing on console text "UNLOAD:1") WITH window prompt during refresh.

window.addEventListener("beforeunload", function(event) {
  console.log("UNLOAD:1");
  //event.preventDefault();
  event.returnValue = null; //"Any text"; //true; //false;
  //return null; //"Any text"; //true; //false;
});

You can use any kind of value to event.returnValue (as listed on the right). It is just coding style matter.

Both event.preventDefault nor return has no influence on this event (so in your code you can omit those commented lines).

Tested on Chrome, Edge, Firefox, Opera (verified on 23.09.2019). Hope it helps.

[EDIT:]

To avoid reloading mobile application by accidentally swipe/drag of the screen (eg. google maps, images and any other stable content) this css trick can be usefull:


    body {
       overscroll-behavior-y: contain !important;
    }

The application will be safe against reloading.

It is woth to consider to give to user another possibilty (eg. some button) to reload if needed.

For me the most valuable info is that weird third point. Thx!! — user1039663, Feb 03 '20 at 01:38
3) was a very valuable information. I wondered why I tried thousands of things and it never fired. Thanks — Kai Lehmann, Jan 08 '21 at 07:21
@user1039663 It's similar with the audio playing rule that got placed recently(?). User has to "interact" with the page in order for the page to output sound of media. — Hiro, Jun 05 '21 at 04:45
That is the perfect answer I've seen concerning the Onbeforeunload. Thanks! — Hassan Serhan, Aug 17 '22 at 15:48
a small comment regarding *return* if it influences the event, if it is true then it alerts the user to decide if he wants to leave the page or stay on it — fwBasic, Jan 01 '23 at 00:45

Bud Damyanov · Answer 2 · 2014-06-06T12:28:03.140

The onbeforeunload event is not cancel-able, because of security reasons, but if an event handler function for the onbeforeunload event returns a string value, this text will be shown in a confirmation dialog box, where the user can confirm whether he wants to stay or leave the current page.

Note that event listeners cannot be registered for the onbeforeunload event with the addEventListener and attachEvent methods (only Safari and Google Chrome support it). For a cross-browser solution, register the event handler in HTML (with the onbeforeunload attribute of the body element) or with the onbeforeunload in-line event property of the window object. See the examples below for details.

Examples:

In HTML:

<ELEMENT onbeforeunload="handler">

In JavaScript:

object.onbeforeunload = handler;                        
object.addEventListener ("beforeunload", handler, useCapture);

Actions that invoke the onbeforeunload event:

Navigating to another page directly in the browser or via a link.
Closing the current browser window or tab page.
Reloading the current page.
Manipulating the URL of the currently loaded page through the location object from JavaScript.
Invoking the window.navigate method.
Invoking the window.open or the document.open method to open a document in the same window.

Try to modify your code, like this:

window.onbeforeunload = closing;
/* other code here */

var closing = function () {
        console.log("function alrt WORKS !!!!");
        window.alert("closing now.....");
       }

...or just put directly the code in your body tag:

<body onbeforeunload="alert('function alrt WORKS !!!!')">

See here and here for more details.

Currently this is the only way I have been able to achieve full cross-browser support for the onbeforeunload event (Firefox does not fire it under certain conditions). Thanks for this great answer! — user3351605, Jan 19 '16 at 15:01

Debadatta · Answer 3 · 2018-02-19T10:53:19.447

3

I faced problem where neither beforeunload nor onunload worked to execute one ajax call that should get called when user closes the browser. In fact, none of the methods worked. The javascript method was inside the body tag, which was actually the problem. It was magically solved when I moved the javascript method inside Head tag.

edited Feb 19 '18 at 10:53

answered Jan 25 '18 at 09:23

Debadatta

689
1
8
23

Could you share a code example? I'm not quite sure what you mean. – Josh Powlison Feb 16 '18 at 21:29

score 1 · Answer 4 · answered Jul 31 '22 at 00:59

For people who are experiencing this issue in certain browsers (Safari in my case), after some research, I realized that it was because of how the browser works. This post has a more detailed explanation.

Basically, what I did was to use the alternative which is onpagehide, and so far it works with all browsers that I have tested.

Why onbeforeunload event is not firing

4 Answers4

Linked