Window: unload 事件

已弃用：此功能不再推荐使用。虽然一些浏览器可能仍然支持它，但它可能已从相关网络标准中删除，可能正在被删除过程中，或者可能只保留出于兼容性目的。避免使用它，如果可能，更新现有的代码；请查看此页面底部的兼容性表格，以指导你的决策。请注意，此功能可能随时停止工作。

警告：开发者应避免使用此事件。请参阅下面的“使用说明”。

当文档或子资源正在卸载时，unload 事件会被触发。

它在以下事件后被触发

文档处于以下状态

  • 所有资源仍然存在（img、iframe 等）
  • 最终用户再也看不到任何内容
  • UI 交互无效（window.open，alert，confirm 等）
  • 错误不会阻止卸载工作流程

请注意，unload 事件也遵循文档树：父框架卸载将在子框架 unload **之前** 发生（参见下面的示例）。

语法

在像 addEventListener() 这样的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("unload", (event) => {});
onunload = (event) => {};

事件类型

一个通用的 Event。

事件处理程序别名

除了 Window 接口之外，事件处理程序属性 onunload 也在以下目标上可用

使用注意事项

开发者应避免使用此事件。

特别是在移动设备上，unload 事件不会可靠地触发。例如，在以下情况下，unload 事件根本不会触发

  1. 移动用户访问你的页面。
  2. 然后，用户切换到另一个应用程序。
  3. 稍后，用户从应用程序管理器中关闭浏览器。

此外，unload 事件与 后退/前进缓存 (bfcache) 不兼容，因为许多使用此事件的页面都假设在事件触发后页面将不再存在。为了解决这个问题，一些浏览器（例如 Firefox）在页面有 unload 监听器的情况下不会将页面放入 bfcache 中，这对性能不利。其他浏览器，例如 Chrome，在用户导航离开时不会触发 unload。

用于表示用户会话结束的最佳事件是 visibilitychange 事件。在不支持 visibilitychange 的浏览器中，下一个最佳替代方案是 pagehide 事件，它也不会可靠地触发，但它与 bfcache 兼容。

如果你是专门想检测页面卸载事件，最好监听 pagehide 事件。

有关与 unload 事件相关问题的更多信息，请参阅 页面生命周期 API 指南。

示例

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Parent Frame</title>
    <script>
      window.addEventListener("beforeunload", (event) => {
        console.log("I am the 1st one.");
      });
      window.addEventListener("unload", (event) => {
        console.log("I am the 3rd one.");
      });
    </script>
  </head>
  <body>
    <iframe src="child-frame.html"></iframe>
  </body>
</html>

下面是 child-frame.html 的内容

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Child Frame</title>
    <script>
      window.addEventListener("beforeunload", (event) => {
        console.log("I am the 2nd one.");
      });
      window.addEventListener("unload", (event) => {
        console.log("I am the 4th and last one…");
      });
    </script>
  </head>
  <body>
    ☻
  </body>
</html>

当父框架卸载时，事件将按照 console.log() 消息中描述的顺序触发。

规范

规范
HTML 标准
# event-unload
HTML 标准
# handler-window-onunload

浏览器兼容性

BCD 表格只在启用了 JavaScript 的浏览器中加载。

另请参阅