在HTML5的众多新特性中,有的新特性可能容易被人忽视,又或者不是主流新
特性,但不可忽略,因为估计以后越来越多浏览器支持.今天要介绍的,就是
chrome和ie 10都支持的一个很好的新特性:HTML5中的PageVisibility API,下面例
子讲解下.
比如在web中,有的时候,用户会经常切换页面,把某个页面最小化后,可能很久时间都不打开某个页面了,要过很久再打开.又或者比如在浏览器中,会打开很多TAB同时,有时WEB应用
甚至想清楚了解用户究竟打开某个页看了多长时间,这个在以往,可能很难去做到(特别是判断
用户最小化或者切换了其他页的TAB).但现在HTML5中,提出了相关的规范API,叫
pagevisibility api,其WC3的规范在如下连接可以找到描述:
http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html
其中,DocumentVisibility是其接口,有两个属性:document.hidden和
document.visibilityState.
1)document.hidden属性:
当用户隐藏了页面或者最小化时,该属性返回true
2)document.visibilityState
返回当前页面的状态,分别为hidden(隐藏不可见),visiable(可见),preview(标准中认为是可选的,暂时没浏览器实现).
我们先来看个具体的例子,请用chrome去浏览:http://www.samdutton.com/pageVisibility/
这里例子中，当你新增加了一个TAB时,会发现音乐和动画停止了,当你再次切换回去
时,动画又会继续了,是不是很有趣呢?
再来看具体的例子,代码如下:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
timer = 0;
function onLoad(){
document.addEventListener("visibilitychange",stateChanged);
document.addEventListener("webkitvisibilitychange", stateChanged);
document.addEventListener("msvisibilitychange", stateChanged);
}
function stateChanged(){
console.log(document.webkitVisibilityState);
if(document.hidden || document.webkitHidden || document.msHidden){
//new tab or window minimized
timer = new Date().getTime();
}
else {
alert('You were away for ' + (new Date().getTime()-timer)/1000+ ' seconds.')
}
}
</script>
</head>
<body onLoad="onLoad()">
</body>
</html>
在上面的代码中,同样,在CHROME运行下,在LOAD事件中,监听了相关的
webkitvisibilitychange事件(这个在CHROME下),如果是IE 10,则是
msvisibilitychange事件,然后在回调函数中,开始了计算用户在页面停留的时间,
所以当你打开其他TAB页或者最小化后,再切换回原来这个页,则会JAVASCRIPT
弹出显示:你离开了页面多长时间
要注意的是,在CHROME中,属性命名为webkitHidden,事件为 webkitvisibilitychange事件,而在IE 10中,属性为msHidden 和
msVisibilityState.
参考资料:http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx
http://code.google.com/chrome/whitepapers/pagevisibility.html