html5新特性引见之PageVisibility API-HTML教程-爱易网页

html5新特性引见之PageVisibility API

日期：2014-05-17　浏览次数：20682 次

html5新特性介绍之PageVisibility API
   在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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

html5新特性引见之PageVisibility API

相关资料更多>

推荐阅读更多>