Window: pagehide 事件

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

addEventListener("pagehide", (event) => { })

onpagehide = (event) => { }

事件类型

一个 PageTransitionEvent。继承自 Event。

事件属性

PageTransitionEvent.persisted 只读

表示文档是否从缓存中加载。

事件处理程序别名

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

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

用法说明

与 unload 和 beforeunload 事件一样，浏览器不可靠地触发此事件，尤其是在移动设备上。例如，在以下场景中，pagehide 事件根本不会触发

1. 移动用户访问您的页面。
2. 用户随后切换到不同的应用程序。
3. 稍后，用户从应用程序管理器关闭浏览器。

然而，与 unload 和 beforeunload 事件不同，此事件与 往返缓存 (bfcache) 兼容，因此向此事件添加监听器不会阻止页面被包含在 bfcache 中。

用于表示用户会话结束的最佳事件是 visibilitychange 事件。在不支持 visibilitychange 的浏览器中，pagehide 事件是次优选择。

如果您特别想检测页面卸载事件，pagehide 事件是最佳选择。

有关此事件与页面生命周期中其他事件的关系的更多信息，请参阅 页面生命周期 API 指南。

示例

在此示例中，建立了一个事件处理程序来监听 pagehide 事件，并在页面被持久化以备将来重用时执行特殊处理。

window.addEventListener("pagehide", (event) => {
  if (event.persisted) {
    /* the page isn't being discarded, so it can be reused later */
  }
});

这也可以使用 Window 上的 onpagehide 事件处理程序属性来编写

window.onpagehide = (event) => {
  if (event.persisted) {
    /* the page isn't being discarded, so it can be reused later */
  }
};

规范

浏览器兼容性

另见

• pageshow 事件。
• 页面生命周期 API 提供了关于如何在 Web 应用程序中处理页面生命周期行为的最佳实践指导。
• PageLifecycle.js：一个处理页面生命周期行为中跨浏览器不一致的 JavaScript 库。
• 往返缓存 解释了往返缓存是什么，以及它对各种页面生命周期事件的影响。