onbeforeunload 事件
JavaScript基础 2022-06-08 11:56:36小码哥的IT人生shichen
onbeforeunload 事件
实例
在页面即将卸载时执行 JavaScript：
<body onbeforeunload="return myFunction()">
完整实例：
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">
<p>请重新加载此页面，或单击下面的链接以调用 onbeforeunload 事件。</p>
<a href="https://www.phpcodeweb.com">点击此处访问 phpcodeweb.com</a>
<script>
function myFunction() {
return "Write something clever here...";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
onbeforeunload 事件在文档即将被卸载时发生。
此事件允许您在确认对话框中显示一条消息，通知用户是要停留还是离开当前页面。
出现在确认框中的默认消息，在不同的浏览器中是不同的。但是，标准消息类似于“您确定要离开此页面吗？”。此消息无法删除。
但是，您可以将自定义消息与默认消息一起编写。请参阅此页面上的第一个例子。注释：只适用于 Internet Explorer。
注释：如果 onbeforeunload 事件没有分配给 <body> 元素，则必须将该事件分配/附加到 window 对象上，并使用 returnValue 属性创建自定义消息（请参见下面的语法示例）。
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onbeforeunload | 支持 | 支持 | 支持 | 支持 | 15.0 |
语法
在 HTML 中：
<element onbeforeunload="myScript">
完整实例：
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">
<p>本例演示如何将 "onbeforeunload" 事件分配给 body 元素。</p>
<p>请重新加载此页面，或单击下面的链接以调用 onbeforeunload 事件。</p>
<a href="https://www.phpcodeweb.com">点击此处访问 phpcodeweb.com</a>
<script>
function myFunction() {
return "Write something clever here...";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 JavaScript 中：
object.onbeforeunload = function(){myScript};
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 HTML DOM 将 "onbeforeunload" 事件分配给 window 对象。</p>
<p>请重新加载此页面，或单击下面的链接以调用 onbeforeunload 事件。</p>
<a href="https://www.phpcodeweb.com">点击此处访问 phpcodeweb.com</a>
<script>
window.onbeforeunload = function(event) {
event.returnValue = "Write something clever here..";
};
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 JavaScript 中，使用 addEventListener() 方法：
object.addEventListener("beforeunload", myScript);
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 addEventListener() 方法将 "beforeunload" 事件附加到 window 对象。</p>
<p>请关闭此窗口、按 F5 或单击下面的链接以调用 beforeunload 事件。</p>
<a href="https://www.phpcodeweb.com">点击此处访问 phpcodeweb.com</a>
<script>
window.addEventListener("beforeunload", function(event) {
event.returnValue = "Write something clever here..";
});
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
