Javascript 为什么onbeforeunload事件未触发_Javascript_Html_Events_Dom Events

Javascript 为什么onbeforeunload事件未触发

javascript html events

Javascript 为什么onbeforeunload事件未触发,javascript,html,events,dom-events,Javascript,Html,Events,Dom Events,我在Chrome、FireFox和Safari上试过这段代码。仍然onbeforeunload不会触发。我还尝试了onload上的，但没有成功以下是我正在试验的代码： <!doctype html> <html lang="en"> <head> <title> Output to a Page </title> <meta charset="utf-8"> <script> window

我在Chrome、FireFox和Safari上试过这段代码。仍然

onbeforeunload

不会触发。我还尝试了onload上的

，但没有成功
以下是我正在试验的代码：
<!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>


输出到页面
window.onload=init；
window.onclick=clk；
window.onbeforeunload=关闭；
函数clk（）{
window.alert（“哎哟！！”）；
}
函数关闭（）{
log（“函数alrt工作！！！！”）；
window.alert（“立即关闭…”）；
}
函数init（）{
var输出=”；
对于（变量mms=5；mms>0；mms--）{
如果（彩信>=3）{
输出+=“还有很多M&；M，所以多吃点！
”；
}否则{
输出+=“M&；Ms越来越少，放轻松！
”；
}
}
输出+=“所有M&M&M输出”；
var e=document.getElementById（“输出”）；
e、 innerHTML=输出；
}

由于安全原因，onbeforeunload
事件不可取消，但如果onbeforeunload
事件的事件处理程序函数返回字符串值，则此文本将显示在确认对话框中，用户可以在其中确认是否要保留或离开当前页面
请注意，事件侦听器无法使用addEventListener
和attachEvent
方法注册onbeforeunload
事件的。对于跨浏览器解决方案，请在HTML中注册事件处理程序（使用body
元素的onbeforeunload
属性）或窗口的onbeforeunload
内嵌事件属性。有关详细信息，请参见下面的示例
示例：
在HTML中：

在JavaScript中：
object.onbeforeunload = handler;                        
object.addEventListener ("beforeunload", handler, useCapture);

调用onbeforeunload
事件的操作：
直接在浏览器中或通过链接导航到其他页面
关闭当前浏览器窗口或选项卡页
重新加载当前页面
通过JavaScript中的location对象操纵当前加载页面的URL
调用窗口。导航方法

调用窗口。打开
或文档。打开
方法在同一窗口中打开文档
尝试修改代码，如下所示：
window.onbeforeunload = closing;
/* other code here */

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

…或者直接将代码放入您的正文
标记中：

有关更多详细信息，请参阅和。
我遇到了这样一个问题：beforeunload和onunload都无法执行一个ajax调用，而当用户关闭浏览器时应该调用该调用。事实上，这些方法都不起作用。javascript方法在body标记中，这实际上是问题所在。当我将javascript方法移到Head标记中时，它就神奇地解决了。
Onbeforeunload是webdevelopers世界中最严重的误解之一：D
1） 它拒绝调用所有阻塞本机函数（警报、提示、确认）。从用户的角度来看，这是显而易见的
2） 它（根据MDN）应由“addEventListener”（）注册
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;
});

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;
});

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上测试（于2019年9月23日验证）。希望能有帮助
[编辑：]
要避免意外地滑动/拖动屏幕（如谷歌地图、图像和任何其他稳定内容），从而重新加载移动应用程序，此css技巧非常有用：
body {
       overscroll-behavior-y: contain !important;
    }
身体{
overscroll-behavior-y：包含！重要；
}
应用程序将不会被重新加载
<> P>想给用户另一个可能性（例如，一些按钮），如果需要的话，需要重新加载。
目前，这是我能够为OnBee卸载事件（Firefox在某些条件下不发射它）的完全跨浏览器支持的唯一方式。谢谢你的回答！你能分享一个代码示例吗？我不太清楚你的意思。对我来说，最有价值的信息是那奇怪的第三点。谢谢！！3） 这是一个非常有价值的信息。我想知道为什么我尝试了数千种方法，但都没有成功。Thanks@user1039663这与最近设置的音频播放规则类似（？）。用户必须与页面“交互”，以便页面输出媒体声音。