全国服务热线:4008-888-888

技术知识

HTML5完成网页页面切换激活的PageVisibility API应用初

HTMl5 推出了1个很“非常”的 API Page Visibility ,之因此说它非常,是由于这个 API 关心的是1个非常少人注意的作用 —— 访问器标识( tab ) 是不是被激活。这里务必解释1下,这个“激活”,指的是这个标识是不是正被客户访问,或说是不是为当今标识。

那末,这个 API 到底一些甚么主要用途呢?一般,许多传统式的网页页面在客户沒有激活它的情况下,它还会再次工作中,比如,当客户正在访问新闻门户网,而他以前开启的 NBA 球赛网页页面会再次更新获得全新結果,视頻网站会再次占有带宽载入資源,因而,假如这类无须要的工作中太多了,就会导致许多的資源消耗。因而,这货非常有效:

Web 程序流程每隔1段時间会全自动升级网页页面信息内容,保证客户获得到立即的信息内容,可是,当客户正在访问别的网页页面时,能够操纵它中止升级。
视頻网站在播发线上视頻时会持续载入视頻,直至视頻载入结束,可是,当客户正在访问别的网页页面时,能够中止载入视頻資源,节约带宽。
网站主页上有个大幻灯全自动播发,当客户访问别的网页页面了,便可以中止播发。
因而,根据 Page Visibility ,大家能够最少做到下列1种或几种的益处:

1.节约服务器空间,Ajax 轮询这类服务器空间占有经常会被忽视,关掉这类恳求能够节约資源。
2.节约运行内存耗费。
3.节约带宽耗费。

因而,应用 Page Visibility 不管是针对客户還是服务器都有益处。

接下来宣布详细介绍1下这个 API 。Page Visibility 会在访问器的 document 目标上加上两个特性 hidden 和 visibilityState 。假如当今的标识被激活了,那末 document.hidden 的值为 false ,不然为 true 。visibilityState 则有4个将会值:

hidden:当访问器最少化、切换标识、电脑上锁屏时 visibilityState 值是 hidden
visible:当访问器最顶级左右文(context)的 document 最少显示信息在1个显示屏之中时,回到 visible;当访问器对话框沒有最少化,可是访问器被别的运用遮挡时,这时候也为 visible
prerender:当文本文档被载入到显示屏画面之外或不能见时回到 prerender,这个是是非非必要特性,访问器可挑选性的适用。
unloaded:当文本文档即将被离去 ( unload ) 时回到 unloaded,访问器也可挑选性的适用这个特性
此外,document 上会加上 visibilitychange 恶性事件,当 document 的可见性更改时开启该恶性事件。

好了,详细介绍完特性,放上1个 Demo (开启后切换标识便可检测)。

这个 Demo 的功效是监视标识的可见性是不是更改 ,而且在标识可见性产生更改时造成提醒。

值得留意的是,在现阶段,访问器针对 Page Visibility 的适用還是根据独享特性适用,因而在检验或运用 Page Visibility 出示的特性时必须再加访问器独享前缀,比如在 Chrome 中检验上面的 visibilityState 特性时,就必须检验 document.webkitVisibilityState 而并不是 document.visibilityState 。因此,Demo 中会最先检验访问器种类,随后才应用 Page Visibility 的 API 。关键编码以下:

JavaScript Code拷贝內容到剪贴板
  1. function browerKernel(){   
  2.     
  3.     var result;   
  4.     
  5.     ['webkit''moz''o''ms'].forEach(function(prefix){   
  6.     
  7.         iftypeof document[ prefix + 'Hidden' ] != 'undefined' ){   
  8.             result = prefix;   
  9.         }   
  10.     });   
  11.     
  12.     return result;   
  13.     
  14. }   
  15.     
  16. function init(){   
  17.     
  18.     prefix = browerKernel();   
  19.     
  20.     var showTip = document.getElementById('showTip');   
  21.     
  22.     document.addEventListener( prefix  + 'visibilitychange'function onVisibilityChange(e){   
  23.     
  24.         var tip = null;   
  25.                 
  26.         if( document[ prefix + 'VisibilityState' ] == 'hidden' ) tip = '<p>离去网页页面</p>';   
  27.         else if( document[ prefix + 'VisibilityState' ]  == 'visible' ) tip = '<p>进到网页页面</p>';   
  28.     
  29.         showTip.innerHTML = showTip.innerHTML + tip;   
  30.     });   
  31. }   
  32.     
  33. window.onload = init();   
  34.   

再再看来1个实际的事例,编码以下:

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>       
  2. <html>       
  3. <head>       
  4.      <script type="text/javascript">       
  5.           timer = 0;       
  6.           function onLoad(){       
  7.                document.addEventListener("visibilitychange",stateChanged);       
  8.                document.addEventListener("webkitvisibilitychange", stateChanged);       
  9.                document.addEventListener("msvisibilitychange", stateChanged);       
  10.           }       
  11.           function stateChanged(){       
  12.                console.log(document.webkitVisibilityState);       
  13.                if(document.hidden || document.webkitHidden || document.msHidden){       
  14.                     //new tab or window minimized     
  15.                     timer = new Date().getTime();       
  16.                }       
  17.                else {       
  18.                     alert('You were away for ' + (new Date().getTime()-timer)/1000+ ' seconds.')       
  19.                }       
  20.           }       
  21.      </script>       
  22. </head>       
  23. <body onLoad="onLoad()">       
  24. </body>       
  25. </html>    

在上面的编码中,一样,在CHROME运作下,在LOAD恶性事件中,监视了有关的 webkitvisibilitychange恶性事件(这个在CHROME下),假如是IE 10,则是 msvisibilitychange恶性事件,随后在回调函数涵数中,刚开始了测算客户在网页页面滞留的時间, 因此当你开启别的TAB页或最少化后,再切换成原先这个页,则会JAVASCRIPT 弹出显示信息:你离去了网页页面多长期 。
要留意的是,在CHROME中,特性取名为webkitHidden,恶性事件为 webkitvisibilitychange恶性事件,而在IE 10中,特性为msHidden 和 msVisibilityState.



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服