文档：visibilitychange 事件

当文档的标签内容变得可见或被隐藏时，visibilitychange 事件将在文档上触发。

该事件不可取消。

语法

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

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

onvisibilitychange = (event) => {};

事件类型

一个通用的 Event。

使用说明

该事件不包含文档更新的可见性状态，但您可以从文档的 visibilityState 属性获取该信息。

当用户导航到新页面、切换选项卡、关闭选项卡、最小化或关闭浏览器，或在移动设备上从浏览器切换到其他应用程序时，此事件将以 visibilityState 为 hidden 的状态触发。 转到 hidden 是页面可以可靠地观察到的最后一个事件，因此开发人员应该将其视为用户会话的可能结束（例如，用于 发送分析数据）。

页面也可以在转到 hidden 时停止进行 UI 更新，并停止用户不希望在后台运行的任何任务。

示例

在转到隐藏时暂停音乐

此示例在页面隐藏时暂停播放音频，并在页面再次可见时恢复播放。有关完整示例，请参阅 页面可见性 API：在页面隐藏时暂停音频 文档。

js
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    playingOnHide = !audio.paused;
    audio.pause();
  } else {
    // Resume playing if audio was "playing on hide"
    if (playingOnHide) {
      audio.play();
    }
  }
});

在转到隐藏时发送会话结束分析

此示例将转到 hidden 视为用户会话的结束，并使用 Navigator.sendBeacon() API 发送相应的分析。

js
document.onvisibilitychange = () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
};

规范

规范
HTML 标准
# event-visibilitychange
HTML 标准
# handler-onvisibilitychange

浏览器兼容性

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

另请参阅