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事件的事件处理函数返回字符串值，则此文本将显示在确认对话框中，用户可以确认他是想留下还是离开当前页面。

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

示例：

在HTML中：

window

在JavaScript中：

<ELEMENT onbeforeunload="handler">

调用object.onbeforeunload = handler; object.addEventListener ("beforeunload", handler, useCapture);事件的操作：

直接在浏览器中或通过链接导航到其他页面。
关闭当前浏览器窗口或标签页。
重新加载当前页面。
通过JavaScript中的位置对象操作当前加载页面的URL。
调用onbeforeunload方法。
调用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

有关详细信息，请参阅here和here。

Answer 2

Onbeforeunload是Web开发人员世界中最大的误解之一：D

1）它拒绝调用所有阻塞的本机函数（警报，提示，确认）。从用户角度来看很明显。

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

3）仅当用户与网站进行任何交互时才触发。如果没有任何互动（即使在任何地方都只需单击一下），beforeunload事件都不会触发。

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验证）。希望对您有所帮助。

Answer 3

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

为什么onbeforeunload事件没有触发

3 个答案: