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 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 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
使用PHP制作新闻系统的思路
2006/10/09 PHP
php Undefined index的问题
2009/06/01 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
Python实现的简单模板引擎功能示例
2017/09/02 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
Python生成器generator用法示例
2018/08/10 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
物流专业毕业生推荐信范文
2013/11/18 职场文书
开学寄语大全
2014/04/08 职场文书
初二学习计划书范文
2014/04/27 职场文书
国庆促销活动总结
2014/08/29 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
优秀班主任材料
2014/12/16 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android