Window：pagehide 事件

当浏览器从展示会话历史中的另一个页面过程中隐藏当前页面时，会向 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 Standard # event-pagehide

BCD tables only load in the browser