Window：pagehide 事件

当浏览器在显示会话历史记录中的不同页面过程中隐藏当前页面时，会向 Window 发送 pagehide 事件。

例如，当用户点击浏览器的“后退”按钮时，当前页面会在显示前一个页面之前收到 pagehide 事件。

语法

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

js
addEventListener("pagehide", (event) => {});
onpagehide = (event) => {};

事件类型

一个 PageTransitionEvent。继承自 Event。

Event PageTransitionEvent

事件属性

PageTransitionEvent.persisted 只读

指示文档是否正在从缓存中加载。

事件处理程序别名

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

用法说明

与 unload 和 beforeunload 事件类似，浏览器不会可靠地触发此事件，尤其是在移动设备上。例如，在以下情况下根本不会触发 pagehide 事件

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

但是，与 unload 和 beforeunload 事件不同，此事件与 后退/前进缓存 (bfcache) 兼容，因此向此事件添加监听器不会阻止页面包含在 bfcache 中。

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

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

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

示例

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

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

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

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

规范

规范
HTML 标准
# event-pagehide

浏览器兼容性

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

另请参阅

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