页面可见状态API使用方法

本文Demo请见：https://www.lyz810.com/demo/pageVisibility/
一、应用场景

页面可见性状态一般可以用于以下场景：

1. 音频或视频（尤其是视频）播放时，当页面不可见自动暂停播放，页面恢复后再继续播放
2. 一些定时执行的操作（如微博获取最新的微博条数，该动作每分钟获取一次），没有必要在用户不可见的时候去获取数据
3. 网页游戏在用户切换页面后，游戏自动暂停，用户体验更好
4. 统计用户停留时长，这种方式比目前常用的两次页面打开时间之差得到用户停留时长更准确

二、document.visibilityState属性值

document.visibilityState有四个值（后两个是可选属性，浏览器可以不实现）：

1. hidden
2. visible
3. prerender
4. unloaded

以下情况，document.visibilityState的值为hidden：

• 浏览器最小化
• 浏览器没有最小化，但是页面是非活动的标签页（即切换到其他标签），浏览器被其他窗口覆盖值不会受影响
• 操作系统锁屏

在页面可见时，值为visible

在页面的父级页面不可见时，值可以为prerender(该属性为可选的)

在文档卸载时，值应为unloaded(该属性为可选的)

三、document.hidden属性

document.hidden为布尔型，当页面不可见（hidden）时为true，可见（visible）时为false

四、visibilitychange事件

document中的visibilitychange用于监听可见状态改变的事件，用法如下：

document.addEventListener('visibilitychange', function(){
  console.log(document.visibilityState);
}, false);

五、兼容性

IE：10+
FireFox：18+（10~17需要加moz前缀）
Chrome：33+（14~32需要加webkit前缀）
Safari：6.1+
Opera：12.1以及20+（15~19需要加webkit前缀，12.1不需要加前缀）