visibilitychange事件介绍
简单的说,浏览器标签页被隐藏或显示的时候会触发visibilitychange
事件。
这个事件可以满足一些用户需求,比如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询,还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。
这个事件已经得到现代浏览器广泛的支持,不过一些老版本的浏览器需要加相应的前缀。
13前缀webkit 33无需前缀 |
10前缀moz 18无需前缀 |
10前缀ms | 12.10 | 最新的测试已经支持 |
注:Opera 12.10浏览器在最小化时不触发visibilitychange
事件,也不将hidden
属性设置为true
.
document的可见性属性
Page Visibility (Second Edition)中定义了2个只读的document
属性:hidden
和visibilityState。
其中document.hidden
是一个布尔值,简单的表示标签页显示或者隐藏。而document.visibilityState
属性更为详细,目前有四个可能的值:
-
visible
: 页面内容至少部分可见。这意味着在实际情况中,该网页是一个非最小化窗口的可见标签页。 -
hidden
: 页面内容是对用户不可见。实际上,这意味着该文档是后台标签页或最小化窗口的一部分,或者系统锁屏是时的状态。 -
prerender
: 网页内容被预渲染并且用户不可见。 -
unloaded
: 如果文档被卸载,那么这个值将被返回。
一般情况下我们使用document.hidden
就能满足通常的需求。
为了支持老版本的浏览器,我们需要对document.hidden
在做一些前缀处理:
- function getHiddenProp(){
- var prefixes =['webkit','moz','ms','o'];
- // if 'hidden' is natively supported just return it
- if('hidden' in document)return'hidden';
- // otherwise loop over all the known prefixes until we find one
- for(var i =0; i < prefixes.length; i++){
- if((prefixes[i]+'Hidden') in document)
- return prefixes[i]+'Hidden';
- }
- // otherwise it's not supported
- returnnull;
- }
同样的,我们可以获取document.visibilityState
属性:
- function getVisibilityState(){
- var prefixes =['webkit','moz','ms','o'];
- if('visibilityState' in document)return'visibilityState';
- for(var i =0; i < prefixes.length; i++){
- if((prefixes[i]+'VisibilityState') in document)
- return prefixes[i]+'VisibilityState';
- }
- // otherwise it's not supported
- returnnull;
- }
这样我们可以写一个跨浏览器的函数,检查文档是否可见。
- function isHidden(){
- var prop = getHiddenProp();
- if(!prop)returnfalse;
- return document[prop];
- }
visibilitychange监听事件
你可以在document对象上注册一个监听visibilitychange
事件,根据document.hidden
或者document.visibilityState
属性做一些业务逻辑:
- // use the property name to generate the prefixed event name
- var visProp = getHiddenProp();
- if(visProp){
- var evtname = visProp.replace(/[H|h]idden/,'')+'visibilitychange';
- document.addEventListener(evtname,function(){
- document.title = document[getVisibilityState()]+"状态";
- },false);
- }
上面的代码会在页面可见性发生变化时修改document.title
的值。
demo:http://www.css88.com/demo/visibilitychange-event/
参考阅读:
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
http://www.html5rocks.com/en/tutorials/pagevisibility/intro/?redirect_from_locale=zh
相关推荐
现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务。同时还有新的document.hidden属性可以使用。 document.hidden 这...
该插件规范了页面可见性 API 的前缀名称,以便您可以简单地使用带有 jQuery 的无前缀的“visibilitychange”事件并使用无前缀的 document.hidden 和 document.visibilityState 属性。 在不支持页面可见性 API ...
Mysql InnoDB多版本可见性分析,由何登成编写,非常经典值得看看
PostgreSQL 行可见性验证 PostgreSQL 行可见性验证 PostgreSQL 行可见性验证
大规模复杂场景可见性判断及剔除技术研究与实现,一篇学位论文,主要将3D场景剔除,加速优化等问题,供相应需要的人参考。
Vue懒惰的容器 English |介绍vue惰性容器,通过检测页面中元素的可见性,决定是否加载资源并进行渲染。为什么当页面内容超过一个屏幕时,我们通常只希望加载和呈现当前屏幕的数据。随着页面的滚动,加载并呈现以下...
深入理解并发可见性、有序性、原子性与JMM内存模型深入理解并发可见性、有序性、原子性与JMM内存模型深入理解并发可见性、有序性、原子性与JMM内存模型深入理解并发可见性、有序性、原子性与JMM内存模型深入理解并发...
silverlight实例:图层可见性控制, 根据checkbox控制图层可见性
java语言中可见性方面的描述。对初学者有一定的帮助!
使用vulkan技术利用硬件接口实现,用于3d大场景可见性剔除.
jquery可见性过滤选择器使用示例
STK_Matlab的GPS卫星可见性仿真分析
三种继承方式下基类成员对派生类的可见性探讨(公有继承、私有继承、受保护继承)
ArcGIS可见性分析之提取天际线与可见性分析视频教程
基于STK_Matlab的GPS卫星可见性仿真分析
想要在Unity中快速更改UI的可见性吗?那就使用UIToggle吧! 这个Unity插件的目的非常简单:当您拥有在游戏的UGUI,并且想要重新定位/缩放/旋转通常被禁用的对象时,您可以启动UIToggle,放入要更改可见性的对象,...
U盘文件夹恢复组合,恢复文件夹可见性真实性 里面的程序和批处理都是自己写的 用于自动恢复U盘被病毒伪装隐藏的文件夹 会自动删除U盘下的可执行文件,一般是病毒感染过的 所以如果那些可执行文件不重要的话才运行,...
基于STK_Matlab的航天器可见性仿真分析.pdf
此程序为11个随机2维数据,将他们根据可见性公式连接起来。
多视纹理映射中无需设定偏差的快速可见性检测.docx