Window: unload 事件
已弃用：此特性不再推荐。虽然某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在删除过程中，或者可能仅为兼容性目的而保留。请避免使用它，如果可能，请更新现有代码；请参阅本页底部的兼容性表格以指导您的决策。请注意，此特性可能随时停止工作。
警告：开发者应避免使用此事件。请参阅下面的“使用注意事项”。
当文档或子资源被卸载时，会触发 unload 事件。
它在以下情况后触发：
beforeunload(可取消事件)pagehide
文档处于以下状态：
- 所有资源仍然存在（图片、iframe 等）
- 最终用户不再能看到任何内容
- UI 交互无效（
window.open、alert、confirm等） - 错误不会停止卸载流程
请注意，unload 事件也遵循文档树：父框架的 unload 将在子框架的 unload 之前发生（请参阅下面的示例）。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
addEventListener("unload", (event) => { })
onunload = (event) => { }
事件类型
一个通用的 Event。
事件处理程序别名
除了 Window 接口，事件处理程序属性 onunload 也可在以下目标上使用：
用法说明
开发者应避免使用此事件。
特别是在移动设备上，unload 事件并非总是可靠触发。例如，在以下场景中，unload 事件根本不会触发：
- 移动用户访问您的页面。
- 用户随后切换到不同的应用程序。
- 稍后，用户从应用程序管理器关闭浏览器。
此外，unload 事件与前进/后退缓存 (bfcache) 不兼容，因为许多使用此事件的页面假定在事件触发后页面将不再存在。为了解决这个问题，一些浏览器（例如 Firefox）如果页面有 unload 监听器，就不会将页面放入 bfcache，这不利于性能。其他浏览器，例如 Chrome，在用户离开时不会触发 unload。
用于表示用户会话结束的最佳事件是visibilitychange 事件。在不支持 visibilitychange 的浏览器中，次佳替代方案是pagehide 事件，它也并非可靠触发，但与 bfcache 兼容。
如果您特别尝试检测页面卸载事件，最好监听 pagehide 事件。
有关与 unload 事件相关问题的更多信息，请参阅页面生命周期 API 指南。
示例
<!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 的内容
<!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 |
浏览器兼容性
加载中…
另见
- 相关事件：
DOMContentLoaded、readystatechange、load - 卸载文档 — 卸载文档
visibilitychange事件。- 不要丢失用户和应用程序状态，请使用页面可见性详细解释了为什么要使用
visibilitychange，而不是beforeunload/unload。 - 页面生命周期 API 提供了关于如何在 Web 应用程序中处理页面生命周期行为的最佳实践指导。
- PageLifecycle.js：一个处理页面生命周期行为中跨浏览器不一致的 JavaScript 库。
- 往返缓存 解释了往返缓存是什么，以及它对各种页面生命周期事件的影响。