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 相关文章推荐
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 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
第八节--访问方式
2006/11/16 PHP
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python入门必须知道的11个知识点
2018/03/21 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python实现词法分析器
2019/01/31 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
爱普生美国官网:Epson美国
2018/11/05 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
实习生自荐信范文
2013/11/13 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
自荐书范文范例
2014/02/13 职场文书
志愿者活动总结
2014/04/28 职场文书
谢师宴答谢词
2015/01/05 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS