程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > html5 >

HTML5实现页面切换激活的PageVisibility API使用初探

Kayo   发布时间：2016-05-13 11:16:24   作者：Kayo Lee   我要评论
这篇文章主要介绍了HTML5实现页面切换激活的PageVisibility API使用初探,PageVisibility可以使我们在切换浏览器tab页面时自动停止和播放视频,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

HTMl5 推出了一个很“特别”的 API Page Visibility ，之所以说它特别，是因为这个 API 关注的是一个很少人留意的功能 —— 浏览器标签( tab ) 是否被激活。这里必须解释一下，这个“激活”，指的是这个标签是否正被用户浏览，或者说是否为当前标签。

那么，这个 API 究竟有些什么用途呢？通常，很多传统的页面在用户没有激活它的时候，它还会继续工作，例如，当用户正在浏览新闻门户，而他之前打开的 NBA 球赛页面会继续刷新获取最新结果，视频网站会继续占用带宽加载资源，于是，如果这类不必要的工作太多了，就会造成很多的资源浪费。因此，这货相当有用：

Web 程序每隔一段时间会自动更新页面信息，确保用户获取到及时的信息，但是，当用户正在浏览其他页面时，可以控制它暂停更新。
视频网站在播放在线视频时会不断加载视频，直到视频加载完毕，但是，当用户正在浏览其他页面时，可以暂停加载视频资源，节省带宽。
网站首页上有个大幻灯自动播放，当用户浏览其他页面了，就可以暂停播放。
于是，通过 Page Visibility ，我们可以至少达到以下一种或几种的好处：

1.节省服务器资源，Ajax 轮询这类服务器资源占用常常会被忽略，关闭这种请求可以节省资源。
2.节省内存消耗。
3.节省带宽消耗。

因此，使用 Page Visibility 无论是对于用户还是服务器都有好处。

接下来正式介绍一下这个 API 。Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState 。如果当前的标签被激活了，那么 document.hidden 的值为 false ，否则为 true 。visibilityState 则有4个可能值：

hidden：当浏览器最小化、切换标签、电脑锁屏时 visibilityState 值是 hidden
visible：当浏览器最顶级上下文（context）的 document 至少显示在一个屏幕当中时，返回 visible；当浏览器窗口没有最小化，但是浏览器被其他应用遮挡时，这时也为 visible
prerender：当文档被加载到屏幕画面以外或者不可见时返回 prerender，这个是非必要属性，浏览器可选择性的支持。
unloaded：当文档将要被离开 ( unload ） 时返回 unloaded，浏览器也可选择性的支持这个属性
另外，document 上会添加 visibilitychange 事件，当 document 的可见性改变时触发该事件。

好了，介绍完属性，放上一个 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.         if( typeof 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.   

再再来看一个具体的例子,代码如下:

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.

相关文章

  • HTML5实现的轻量级绘制SVG轮廓线路径动画插件特效源码

    是一段实现了五款轻量级绘制SVG轮廓线路径动画效果代码，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用
    2016-05-16

  • html5 实现客户端验证上传文件的大小(简单实例)

    下面小编就为大家带来一篇html5 实现客户端验证上传文件的大小(简单实例)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-15

  • html5基于鼠标滚动控制植树生长动画特效源码

    这是一款html5基于鼠标滚动控制植树生长动画特效源码，伴随着鼠标滚轮的滚动可呈现出树木生长的动画效果。整体动画渐变效果流畅自然
    2016-05-13

  • 【HTML5】Canvas绘制简单图片教程

    下面小编就为大家带来一篇【HTML5】Canvas绘制简单图片教程。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-05-13

  • HTML5的Geolocation地理位置定位API使用教程

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用,今天这篇文章就向大家介绍一下HTML5的Geolocation地理
    2016-05-12

  • HTML5中的强制下载属性download使用实例解析

    链接中加入download属性可以使用户将文件下载下来而不是直接用浏览器打开,截止到目前为止对HTML5提供支持的浏览器已经对这个属性支持得比较好了,下面我们就来详细看一下HTM
    2016-05-12

  • HTML5事件方法全部汇总

    下面小编就为大家带来一篇HTML5事件方法全部汇总。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
    2016-05-12

  • HTML5全屏响应式缩放切换幻灯片代码

    HTML5全屏响应式缩放切换幻灯片代码是一款切换的时候当前slide会平滑缩小并移动，下一个slide会从缩小状态逐渐放大并移动到屏幕中间，效果不错。需要的朋友前来下载源码哦
    2016-05-10

  • 深入理解HTML的FormData对象

    下面小编就为大家带来一篇深入理解HTML的FormData对象。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-05-17

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com