html5新特性介绍之PageVisibilityAPI

   在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

发表评论

电子邮件地址不会被公开。 必填项已用*标注