html visibilitychange 事件

一、触发时机

浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

二、代码实现

document.addEventListener("visibilitychange", function () {
    console.log('document.visibilityState: ' + document.visibilityState);
    console.log('document.hidden: ' + document.hidden, document.hidden ? ' 页面隐藏' : ' 页面显示');
});

1
2
3
4
5

三、取值

3.1 Document.visibilityState

• visible: 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化。
• hidden: 此时页面对用户不可见。即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’ 。
• prerender: 页面此时正在渲染中，因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始，永远不能从其他值变为此状态。注意: 浏览器支持是可选的。

var string = document.visibilityState
1

3.2 Document.hidden

只读属性 布尔值 简单的表示标签页显示或者隐藏。
如果页面处于被认为是对用户隐藏状态时返回true，否则返回false。

四、使用场景

1. 网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片。
2. 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
3. 页面想要检测是否正在渲染，以便可以准确的计算网页浏览量（埋点使用场景）。
4. 当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）。

五、参考

• visibilitychange应用
• visibilitychange
• 页面可见性改变事件 : visibilitychange 详解