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


Posted in HTML / CSS onMay 13, 2016

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.         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.   

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

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.

HTML / CSS 相关文章推荐
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 #HTML / CSS
HTML5事件方法全部汇总
May 12 #HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 #HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 #HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 #HTML / CSS
字中字效果的实现【html5实例】
May 03 #HTML / CSS
html5需遵循的6个设计原则
Apr 27 #HTML / CSS
You might like
检测png图片是否完整的php代码
2010/09/06 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
js jquery做的图片连续滚动代码
2008/01/06 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
AngularJs分页插件使用详解
2018/06/30 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
vue实现弹幕功能
2019/10/25 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
jquery自定义组件实例详解
2020/12/31 jQuery
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python的设计模式编程入门指南
2015/04/02 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
小学教师师德师风个人整改措施
2014/09/18 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
教师年终个人总结
2015/02/11 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js