本文详细解析 JavaScript 中 onbeforeunload 和 onunload 两个页面生命周期事件的区别与应用场景。重点对比了两者在触发时机、执行顺序及阻止关闭功能上的差异，并梳理了 IE、Firefox、Chrome 等主流浏览器对这两个事件的支持情况与兼容性问题，提供多种代码实现方式供开发者参考。
页面关闭与刷新事件概述
在日常网页交互中，用户点击链接、关闭标签页或提交表单时，系统常需确认操作意图，例如弹出提示框询问是否确认离开。
本文将深入介绍 JavaScript 中用于处理此类场景的两个关键事件：onbeforeunload 和 onunload。
这两个事件在功能上存在共同点：
它们均用于响应页面的关闭或刷新行为，允许开发者在页面生命周期结束前执行特定逻辑。
onbeforeunload 与 onunload 的区别
然而，两者在触发机制和行为上存在显著差异：
- onbeforeunload 事件的触发顺序早于 onunload。这是因为 onbeforeunload 在页面刷新或关闭前触发，而 onunload 则在页面完全关闭后触发。
- onbeforeunload 事件具备拦截能力，可以阻止 onunload 事件的执行。
- 相比之下，onunload 事件一旦触发，无法阻止页面的关闭动作。
- 不同浏览器对这两个事件的支持程度各异，具体表现如下：
onunload 的浏览器兼容性
关于 onunload 事件的浏览器行为：
在 IE6、IE7 和 IE8 中，该事件在刷新页面、关闭浏览器或页面跳转后均会执行；
IE9 仅在刷新页面时执行，而页面跳转或关闭浏览器时不执行；
Firefox（含 3.6 版本）在关闭标签页、页面跳转或刷新后执行，但关闭整个浏览器时不执行；
Safari 在刷新页面或页面跳转后执行，但关闭浏览器时不执行；
Opera 和 Chrome 在所有情况下均不执行该事件。
onbeforeunload 的浏览器兼容性
关于 onbeforeunload 事件的浏览器行为：
IE、Chrome 和 Safari 对该事件支持良好；
Firefox 不支持显示自定义文字提醒信息；
Opera 不支持该事件；
IE6 和 IE7 存在已知 bug。
代码实现示例
以下为具体的代码实现示例：
onbeforeunload 事件的实现方式：
方式一：直接在 HTML 元素中绑定事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onbeforeunload="return myFunction()">
<p>该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.qqtimezone.top">博客地址</a>
<script>
function myFunction() {
return "自定义内容";
}
</script>
</body>
</html>
方式二：通过 JavaScript 脚本直接赋值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.runoob.com">点击调整到菜鸟教程</a>
<script>
window.onbeforeunload = function(event) {
event.returnValue = "我在这写点东西...";
};
</script>
</body>
</html>
方式三：使用 addEventListener 方法添加事件监听（注意：此方法在 IE8 及以下版本中不支持）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>该实例演示了如何使用 addEventListener() 方法向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.qqtimezone.top">跳转地址</a>
<script>
window.addEventListener("beforeunload", function(event) {
event.returnValue = "我在这写点东西...";
});
</script>
</body>
</html>
onunload 事件的实现方式：
方式一：在 HTML 元素中直接绑定。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun() {
// dosomethings
}
</script>
</head>
<body onunload="fun()">
</body>
</html>方式二：通过 JavaScript 脚本直接赋值。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onunload = function() {
// dosomethings
};
</script>
</head>
<body>
</body>
</html>
以上内容涵盖了 JavaScript 中页面关闭与刷新事件的核心知识点，希望能为您的开发工作提供协助，欢迎持续关注本站获取更多技术分享。