用 visibilitychange 事件判断页面可见性 – 使用 PageVisibility API
这里了将介绍一下 页面可见性(PageVisibility)API的简单应用。
visibilitychange事件介绍
简单的说,浏览器标签页被隐藏或显示的时候会触发visibilitychange
事件。
这个事件可以满足一些用户需求,比如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询,还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。
这个事件已经得到现代浏览器广泛的支持,不过一些老版本的浏览器需要加相应的前缀。
Chrome (Webkit) | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|
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
在做一些前缀处理:
同样的,我们可以获取document.visibilityState
属性:
这样我们可以写一个跨浏览器的函数,检查文档是否可见。
visibilitychange监听事件
你可以在document对象上注册一个监听visibilitychange
事件,根据document.hidden
或者document.visibilityState
属性做一些业务逻辑:
上面的代码会在页面可见性发生变化时修改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
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:愚人码头 来源: WEB前端开发
- 标签: page visibility visibilitychang 页面可见性
- 发布时间:2016-06-06 23:32:01
- [65] Oracle MTS模式下 进程地址与会话信
- [64] Go Reflect 性能
- [64] 如何拿下简短的域名
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 【社会化设计】自我(self)部分――欢迎区
- [58] 图书馆的世界纪录
- [56] android 开发入门
- [53] 视觉调整-设计师 vs. 逻辑
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [45] 界面设计速成