文档：visibilitychange 事件
当 visibilitychange 事件在文档上触发时，表示其选项卡的内容已变得可见或已被隐藏。
该事件不可取消。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("visibilitychange", (event) => { })
onvisibilitychange = (event) => { }
事件类型
一个通用的 Event。
用法说明
该事件不包含文档的更新后的可见性状态，但你可以从文档的 visibilityState 属性中获取该信息。
当用户导航到新页面、切换选项卡、关闭选项卡、最小化或关闭浏览器，或者在移动设备上从浏览器切换到其他应用程序时，此事件会以 hidden 的 visibilityState 触发。转换为 hidden 是页面上最后一个可可靠观察到的事件，因此开发者应将其视为用户会话可能已结束（例如，用于 发送分析数据）。
转换为 hidden 也是页面可以停止进行 UI 更新并停止用户不想在后台运行的任何任务的一个好时机。
示例
在转换为 hidden 时暂停音乐
此示例在页面隐藏时暂停播放音频，并在页面再次可见时恢复播放。有关完整示例，请参阅 Page Visibility API：页面隐藏时暂停音频 文档。
js
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
playingOnHide = !audio.paused;
audio.pause();
} else if (playingOnHide) {
// Resume playing if audio was "playing on hide"
audio.play();
}
});
在转换为 hidden 时发送会话结束分析
此示例将转换为 hidden 视为用户会话的结束，并使用 Navigator.sendBeacon() API 发送适当的分析数据。
js
document.onvisibilitychange = () => {
if (document.visibilityState === "hidden") {
navigator.sendBeacon("/log", analyticsData);
}
};
规范
| 规范 |
|---|
| HTML # event-visibilitychange |
| HTML # handler-onvisibilitychange |
浏览器兼容性
加载中…
另见
- Page Visibility API
Document.visibilityStateDocument.hidden- 不要丢失用户和应用程序状态，请使用页面可见性详细解释了为什么要使用
visibilitychange，而不是beforeunload/unload。 - Page Lifecycle API 为在 Web 应用程序中处理页面生命周期行为提供了最佳实践指导。