js判断页面可见状态的方法

[chenxiaochun]

现代的浏览器都是支持多个tab页面之间互相切换的。那我们怎么能知道用户已经离开当前页面，切换到别的页面去了呢？又或者怎么知道用户从别的页面又切换回来了呢？ 所以，下面我想介绍的就是浏览器中的一套用来判断当前页面可见状态的api：

document.hidden

它是一个只读属性，当用户切换到浏览器的其它页面或者最小化浏览器窗口的时候，它的属性值就会变为true，否则就为false，同时会触发一个visibilitychange事件，我们就可以监听这个事件，然后在其中去编写自己的处理逻辑。

一些使用场景

• 比如页面中有视频播放，用户切换到其它页面时，你就可以先暂停页面中的视频播放，等他再次切换回来的时候，再自动继续播放，可以节省设备的资源和流量。
• 比如页面中的轮播图，用户没有浏览当前页面时，就可以先暂停。
• 再比如页面中有时会实时的从服务器拉取信息，用户离开页面时暂停，可以有效节省设备的流量消耗，特别是在移动设备上。

使用示例

这是一个音乐播放器的示例，你打开页面就会播放音乐，切换到其它页面时音乐就会暂停，当你再次回来时音乐会继续播放。我们来看看它的实现方式：

<audio id="music" src="http://mx.djkk.com/mix/2016/2016-5/2016-5-17/2016517225932.m4a" controls autoplay></audio>

var music = document.querySelector('#music');

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

function visibilitychange(){
    if(document.hidden){
        music.pause();
    }else{
        music.play();
    }
}

我在document上监听了visibilitychange事件，然后在它的回调函数里使用document.hidden来判断当前页面的可见状态，以此来控制音乐的播放和暂停。

另外，在document对象上还有一个只读属性也可以用来判断当前页面的可见状态：

document.visibilityState

它可能会有四种状态值：

• visible：当页面没有被最小化，并且是可见状态时
• hidden：当页面已经被最小化，或者不是可见状态时，或者是操作系统处于锁屏状态时
• prerender：页面已经被预渲染完毕，还没有展示给用户时
• unloaded：页面没有从内存中被加载出来时

实在是没想明白后两种状态值是怎样的一个状态，并且如何去模拟这两种场景。 按照这篇文章里的描述，也模拟不出来啊：GA源代码里的小技巧之preview和prerender

参考链接：

• https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

[WangJi]

window.blur 事件应该也具有同样的效果。 https://developer.mozilla.org/en-US/docs/Web/API/Window/blur

[chenxiaochun]

@WangJi ，好的，有机会试试