HTML5 visibilityState属性详细介绍和使用实例


Posted in HTML / CSS onMay 03, 2014

这里必须解释一下,这个“激活”,指的是这个标签是否正被用户浏览,或者说是否为当前标签。

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

1.Web 程序每隔一段时间会自动更新页面信息,确保用户获取到及时的信息,但是,当用户正在浏览其他页面时,可以控制它暂停更新。
2.视频网站在播放在线视频时会不断加载视频,直到视频加载完毕,但是,当用户正在浏览其他页面时,可以暂停加载视频资源,节省带宽。
3.网站首页上有个大幻灯自动播放,当用户浏览其他页面了,就可以暂停播放。

于是,通过 Page Visibility ,我们可以至少达到以下一种或几种的好处:

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

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

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

1.hidden:当浏览器最小化、切换标签、电脑锁屏时 visibilityState 值是 hidden
2.visible:当浏览器最顶级上下文(context)的 document 至少显示在一个屏幕当中时,返回 visible;当浏览器窗口没有最小化,但是浏览器被其他应用遮挡时,这时也为 visible
3.prerender:当文档被加载到屏幕画面以外或者不可见时返回 prerender,这个是非必要属性,浏览器可选择性的支持。
4.unloaded:当文档将要被离开 ( unload ) 时返回 unloaded,浏览器也可选择性的支持这个属性

另外,document 上会添加 visibilitychange 事件,当 document 的可见性改变时触发该事件。

好了,介绍完属性,放上一个使用实例(复制代码保存到一个HTML文件,打开后切换标签即可测试效果)。

复制代码
代码如下:

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>测试 HTML5 Page Visibility API</title>
</head>
<body></p> <p> <div id="showTip"></div>
<script>
function browerKernel(){
var result;
['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){</p> <p> if( typeof document[ prefix + 'Hidden' ] != 'undefined' ){
result = prefix;
}
});
return result;
}
function init(){
prefix = browerKernel();
var showTip = document.getElementById('showTip');
document.addEventListener( prefix + 'visibilitychange', function onVisibilityChange(e){
var tip = null;
if( document[ prefix + 'VisibilityState' ] == 'hidden' ) tip = '<p>离开页面</p>';
else if( document[ prefix + 'VisibilityState' ] == 'visible' ) tip = '<p>进入页面</p>';
showTip.innerHTML = showTip.innerHTML + tip;
});
}
window.onload = init();
</script>
</body>
</html>

这个实例的作用是监听标签的可见性是否改变 ,并且在标签可见性发生改变时产生提示。

值得注意的是,在目前,浏览器对于 Page Visibility 的支持还是通过私有属性支持,因此在检测或利用 Page Visibility 提供的属性时需要加上浏览器私有前缀,例如在 Chrome 中检测上面的 visibilityState 属性时,就需要检测 document.webkitVisibilityState 而不是 document.visibilityState 。所以,Demo 中会首先检测浏览器类型,然后才使用 Page Visibility 的 API 。

HTML / CSS 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 #HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 #HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 #HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 #HTML / CSS
HTML5中5个简单实用的API
Apr 28 #HTML / CSS
会走动的图形html5时钟示例
Apr 27 #HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 #HTML / CSS
You might like
一篇不错的PHP基础学习笔记
2007/03/18 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
python常用知识梳理(必看篇)
2017/03/23 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
Python如何转换字符串大小写
2020/06/04 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
护理专业学生的求职信范文
2013/12/11 职场文书
活动总结格式
2014/08/30 职场文书
法定代表人身份证明书
2014/09/10 职场文书
信访工作汇报材料
2014/10/27 职场文书
2014年工程工作总结
2014/11/25 职场文书
钱学森观后感
2015/06/04 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书