← jQuery load()事件:元素加载完成的监听 jQuery delegate()方法:事件委托的实现方式 →

jQuery unload()事件:页面卸载时的最后时机

原创 2026-04-30 jQuery 已有人查阅

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 监听页面切换。事件的选用要根据实际场景和浏览器兼容性来决定,而不是统一套用一个已弃用的老方法。

← jQuery load()事件:元素加载完成的监听 jQuery delegate()方法:事件委托的实现方式 →
分享笔记 (共有 篇笔记)
验证码:
微信公众号