Window：pagehide 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

当浏览器从展示会话历史中的另一个页面过程中隐藏当前页面时，会向 Window 发送 pagehide 事件。

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

语法

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

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

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

与 unload 和 beforeunload 事件一样，此事件并未得到浏览器的可靠触发，特别是在移动设备上。例如，在以下场景中根本不会触发 pagehide 事件：

然而，与 unload 和 beforeunload 事件不同，此事件与回退或前进缓存（bfcache）兼容，因此向此事件添加监听器不会阻止页面被纳入 bfcache 中。

表示用户会话结束的最佳事件是 visibilitychange 事件。在不支持 visibilitychange 的浏览器中，pagehide 事件是次佳的替代方案。

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

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

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

window.addEventListener(
  "pagehide",
  (event) => {
    if (event.persisted) {
      /* 页面没有被丢弃，因此可以在以后重复使用 */
    }
  },
  false,
);

这里也可以通过在 Window 上的 onpagehide 事件处理器属性来编写：

window.onpagehide = (event) => {
  if (event.persisted) {
    /* 页面没有被丢弃，因此可以在以后重复使用 */
  }
};

Specification
HTML # event-pagehide