HTML5 API详解（5）:Page Visibility API帮您省流量，提高体验

页面可见性API可以让你知 道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个 visibilitychange事件,告诉你用户已经看不到这个页面了,切换到显示状态的时候也同样。你可以给该事件注册监听函数,在页面的可见与不可见状态进行切换时,执行对应的操作。

用处

该API一个很好的用处就是能够在页面切换到不可见状态时暂停执行一些不必要的操作,以减少资源的浪费。

例子

在一个多标签的浏览器中,某个网页所在的标签页很有可能被切换到后台,这时,该网页是用户不可见的。 一些网站很有可能希望在此时做出一些动作。

比如:

1.某网站有个图像幻灯片页面,自动播放图片。如果该页面被切换到了不可见状态,图片的播放操作应该暂停,直到该页面重新对用户可见时,幻灯片才会继续自动播放。

2.某web应用程序每隔一段时间会自动访问服务器更新页面内的及时信息。在页面不可见时,应该停止这种请求动作。

3.某页面想要检测自己是否被预渲染,这样可以获得更准确的页面访问量。

在过去,开发者使用一些不完善的手段间接的实现上述目的。例如通过使用onblur/onfocus事件,在当前页面失去焦点时得到通知。但这样仍然无法检测到正确的页面可见性(失去焦点并不意味着不可见,等等)。如今,页面可见性API可以办到了。

下面上个例子来实现：页面不可见时播放中的视频暂停，可见时视频继续播放

代码：

<video id="video" autoplay="autoplay" loop="loop" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4"></video>

<script>

var video = document.getElementById('video') ;

var Prefix = null;

getHidden();

//获取当前浏览器的hidden属性

function getHidden(){

['webkit','ms','moz','o'].forEach(function(prefix){

if((prefix+'Hidden') in document){

Prefix = prefix;

}

});

if(Prefix == null){

alert('你的浏览器不支持Page Visibility API');

}

}

//为visibilitychange事件绑定处理程序

document.addEventListener(Prefix+'visibilitychange',handleVisibilityChange,false) ;

function handleVisibilityChange(){

switch (document.hidden){

//返回hidden = true，页面不可见

case true: video.pause();break;

//返回hidden = false，页面可见

case false:video.play();break;

}

}

</script>

DEMO地址，请点击“阅读原文”