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>