为什么 onbeforeunload 事件没有触发答案

【问题标题】：Why onbeforeunload event is not firing为什么 onbeforeunload 事件没有触发
【发布时间】：2014-06-06 12:18:44
【问题描述】：

我在 Chrome、FireFox 和 Safari 上尝试了代码。 onbeforeunload 仍然没有触发。我也试过onunload，但还是不行。

这是我正在试验的代码：

<!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>

【问题讨论】：

标签： javascript html events dom-events

【解决方案1】：

Onbeforeunload 是 web 开发者世界中最大的误解之一：D

1) 它拒绝调用所有阻塞的原生函数（alert、prompt、confirm）。从用户的角度来看是显而易见的。

2）它（根据MDN）应该由“addEventListener”（MDN）注册

3) 只有当用户与网站有任何交互时才会触发它。如果没有任何交互（甚至在任意位置单击），onbeforeunload 事件将不会被触发。

4) 这个事件的目的是例如。代表用户秘密保存表单（或其他）中留下的数据（或记录用户行为等）。不是为了阻止刷新网站！

因此没有办法（因为这将一事无成）显示个性化信息。

唯一的感觉是在重新加载时隐藏提示窗口并使用先前保存的数据。

5) 如果您想隐藏提示窗口，请不要为 event.returnValue 字段设置任何值。

此示例卸载站点（在控制台文本“UNLOAD:1”上写入）在刷新期间没有窗口提示。

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

此示例卸载站点（在控制台文本“UNLOAD:1”上写入）刷新期间带有窗口提示。

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

您可以对 event.returnValue 使用任何类型的值（如右侧所列）。这只是编码风格问题。

event.preventDefault 和 return 都对此事件没有影响（因此在您的代码中，您可以省略那些注释行）。

在 Chrome、Edge、Firefox、Opera 上测试（于 23.09.2019 验证）。希望对您有所帮助。

[编辑：]

为了避免因意外滑动/拖动屏幕（例如谷歌地图、图像和任何其他稳定的内容）而重新加载移动应用程序，此 css 技巧可能很有用：

身体 { overscroll-behavior-y：包含！重要； }

应用程序不会重新加载。

如果需要，可以考虑为用户提供另一个重新加载的可能性（例如某些按钮）。

【讨论】：

对我来说最有价值的信息是奇怪的第三点。谢谢！！
3) 是非常有价值的信息。我想知道为什么我尝试了数千种方法，但它从未触发过。谢谢
@user1039663 和最近放的音频播放规则类似（？）。用户必须与页面“交互”才能使页面输出媒体声音。

【解决方案2】：

出于安全原因，onbeforeunload 事件不可取消，但如果 onbeforeunload 事件的事件处理函数返回字符串值，则此文本将显示在确认对话框中，用户可以在其中可以确认他是想留下还是离开当前页面。

请注意，事件监听器不能使用addEventListener 和attachEvent 方法注册onbeforeunload 事件（只有Safari 和Google Chrome 支持）。对于跨浏览器解决方案，在 HTML 中注册事件处理程序（使用 body 元素的 onbeforeunload 属性）或使用 window 对象的 onbeforeunload 内联事件属性。有关详细信息，请参阅下面的示例。

例子：

在 HTML 中：

<ELEMENT onbeforeunload="handler">

在 JavaScript 中：

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

调用onbeforeunload 事件的操作：

直接在浏览器中或通过链接导航到另一个页面。
关闭当前浏览器窗口或标签页。
正在重新加载当前页面。
通过 JavaScript 中的位置对象操作当前加载页面的 URL。
调用window.navigate 方法。
调用window.open 或document.open 方法在同一窗口中打开文档。

尝试修改您的代码，如下所示：

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

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

...或者直接将代码放入您的body 标签中：

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

请参阅here 和here 了解更多详情。

【讨论】：

目前这是我能够实现对 onbeforeunload 事件的完全跨浏览器支持的唯一方法（Firefox 在某些情况下不会触发它）。感谢您的精彩回答！

【解决方案3】：

我遇到的问题是 beforeunload 和 onunload 都无法执行一个应该在用户关闭浏览器时调用的 ajax 调用。事实上，这些方法都没有奏效。 javascript 方法在 body 标记内，这实际上是问题所在。当我将 javascript 方法移动到 Head 标记中时，它神奇地解决了。

【讨论】：

您能分享一个代码示例吗？我不太清楚你的意思。