为什么 onbeforeunload 事件没有触发

Question

我在 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>

Answer 1

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 中的 location 对象操作当前加载页面的 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 !!!!')">

有关更多详细信息，请参阅此处和此处。

Answer 2

Onbeforeunload 是网络开发者世界中最大的误解之一：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 技巧非常有用：

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

该应用程序将是安全的，不会重新加载。

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

Answer 3

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

Answer 4

对于在某些浏览器（在我的情况下为 Safari）中遇到此问题的人，经过一番研究，我意识到这是因为浏览器的工作原理。 这个帖子有更详细的解释。

基本上，我所做的是使用替代方案onpagehide ，到目前为止它适用于我测试过的所有浏览器。

为什么 onbeforeunload 事件没有触发

问题描述

4 个解决方案

解决方案1
23 2014-06-06 12:21:58

解决方案2
16 2019-09-23 14:12:48

解决方案3
1 2018-01-25 09:23:33

解决方案4
0 2022-07-31 00:59:25

为什么 onbeforeunload 事件没有触发

问题描述

4 个解决方案

解决方案1 23 2014-06-06 12:21:58

解决方案2 16 2019-09-23 14:12:48

解决方案3 1 2018-01-25 09:23:33

解决方案4 0 2022-07-31 00:59:25

解决方案1
23 2014-06-06 12:21:58

解决方案2
16 2019-09-23 14:12:48

解决方案3
1 2018-01-25 09:23:33

解决方案4
0 2022-07-31 00:59:25