unload() 是 load() 的对应方法,一个管加载完成,一个管卸载离开。当用户要离开当前页面时——不管是点击链接跳转、关闭浏览器标签页、刷新页面、还是在地址栏输入新网址——unload 事件都会在 window 对象上触发。
这个事件给了开发者在页面被卸载前执行之后一段代码的机会。常见用途包括保存用户未提交的表单数据、清理定时器、关闭 WebSocket 连接、发送用户离开的统计信息等。
和 load() 一样,unload() 也从 jQuery 1.8 开始被标记为弃用,官方推荐用 .on("unload", function(){...}) 替代。但它的核心概念——在页面离开时做收尾工作——在 Web 开发中仍然很重要。
语法形式
$(selector).unload(function(){
// 页面卸载时执行的代码
})
selector 通常是 window 对象,因为 unload 事件主要针对整个页面的卸载场景。
触发 unload 事件的几种操作
以下行为都会触发 unload 事件:
-
点击一个指向其他页面的链接
-
使用浏览器的前进或后退按钮
-
在地址栏输入新的 URL 并回车
-
关闭浏览器标签页或窗口
-
刷新当前页面
这些操作有一个共同点:都会让当前页面被“卸载”,浏览器要离开这个页面去加载新内容了。
基础示例:离开页面时弹出告别提示
下面这个例子演示了 unload() 的绑定方式。页面加载后绑定 unload 事件,当用户点击链接离开时触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>unload() 基础示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>点击下方链接离开本页面,会触发 unload 事件:</p>
<p><a href="https://www.ebingou.cn/biancheng/">前往编程学习页面</a></p>
<p style="color:#888;">也可以尝试关闭标签页或刷新页面来触发事件</p>
<script>
$(document).ready(function(){
$(window).unload(function(){
alert("你正在离开本页面,再见!");
});
});
</script>
</body>
</html>
点击链接后,浏览器在跳转之前会先弹出 alert。不过现在浏览器对 unload 事件中的交互行为限制越来越多,有些浏览器可能会直接屏蔽 alert 弹窗,或者只在特定条件下才允许显示。这个例子在较老的浏览器上效果会比较稳定。
unload 在现在开发中的问题和替代方案
unload 事件在使用中有几个比较头疼的问题:
浏览器限制越来越多。 为了提升用户体验和页面切换速度,很多现在浏览器(尤其是移动端浏览器)对 unload 事件中的操作做了严格限制。在 unload 回调里执行 alert、同步 AJAX 请求等操作可能直接被忽略。
移动端行为不一致。 iOS Safari 等移动浏览器在用户切换标签页时可能不会可靠触发 unload,导致依赖这个事件做数据保存的功能在手机上失效。
更好的替代方案: 针对“页面即将被卸载”的需求,现在浏览器提供了两个替代事件:
-
beforeunload事件:在页面卸载之前触发,可以返回一个字符串提示用户确认是否离开。适合做“你还有未保存的数据”这种防误操作提示。 -
pagehide事件:配合 Page Visibility API,在页面被隐藏时触发。行为比unload更可预测,移动端兼容性也更好。
如果只是想在用户离开时保存一些数据,beforeunload 配合 navigator.sendBeacon() 是目前比较推荐的做法:
$(window).on("beforeunload", function(){
// sendBeacon 可以在页面卸载时可靠地发送数据
navigator.sendBeacon("/api/user-leave", JSON.stringify({time: Date.now()}));
});
sendBeacon 的设计初衷就是在页面卸载时发送小量数据,即使页面被关闭也能保证请求发出去。这比在 unload 里发 AJAX 要可靠得多。
本节课程知识要点
-
unload()事件在用户离开页面时在window对象上触发,用于页面卸载前的收尾操作。 -
从 jQuery 1.8 起已被弃用,推荐使用
$(window).on("unload", function(){...})替代。 -
触发 unload 的行为包括:点击链接跳转、前进后退、地址栏输入新 URL、关闭标签页、刷新页面。
-
现在浏览器对
unload事件中的操作限制较多,alert 和同步 AJAX 可能被屏蔽。 -
替代方案推荐使用
beforeunload事件配合navigator.sendBeacon(),兼容性和可靠性更好。
unload() 事件虽然在现在开发中已经不常用,但“页面离开时需要做收尾工作”这个需求本身仍然存在。理解 unload 的触发时机及其在浏览器中的限制,有助于在面对相关需求时做出更合理的技术选型——是用 beforeunload 做离开确认,还是用 sendBeacon 发送统计数据,或者用 Page Visibility API 监听页面切换。事件的选用要根据实际场景和浏览器兼容性来决定,而不是统一套用一个已弃用的老方法。