当前窗口获得焦点js事件【visibilitychange】
来源:互联网 发布:网络flash插件未安装 编辑:程序博客网 时间:2024/05/16 03:38
当前窗口获得焦点js事件,html5发布之前我们使用window.onfocus和window.onblur来获得窗口焦点和失去窗口焦点,
监听 onfocus() 和window.onblur()事件实现
这个方法可以实现切换标签暂停动画视频,但是会带来一个问题,由于是判断焦点,如果是在当前页面上铺上一个小窗口,那当前页面就暂停了动画,试想,如果你一边看片,一边开个聊天窗口与MM聊天,当你操作聊天窗口的时候,视频暂停了,这并不是你想要的效果。
现在我们来看看HTML5是怎么解决的。H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一。 Page Visibility API能有效的帮助我们完成这样的判断。
使用html5的Page Visibility API来实现
这个 API 本身非常简单,由以下三部分组成。
document.hidden:表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)。
document.visibilityState:表示下面 4 个可能状态的值
hidden:页面在后台标签页中或者浏览器最小化
visible:页面在前台标签页中
prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true
unloaded:页面正在从内存中卸载
Visibilitychange事件:当文档从可见变为不可见或者从不可见变为可见时,会触发该事件。
这样,我们可以监听 Visibilitychange 事件,当该事件触发时,获取 document.hidden 的值,根据该值进行页面一些事件的处理。
结合demo中的实例,切换标签或者最小化的时候,demo中的视频会暂停,恢复当前页面时,demo中的视频会继续播放。完整的代码如下:
- 当前窗口获得焦点js事件【visibilitychange】
- 当前网页关闭事件拦截onbeforeunload ,visibilitychange
- js获得焦点控件&获得键盘事件
- JS:文本框失去焦点事件、获得焦点事件
- 失去焦点和获得焦点发生事件(js)
- js用法收集2(失去焦点、获得焦点事件)
- 失去焦点和获得焦点发生事件(js)
- 获得焦点事件
- 文本框获得焦点事件
- html5 visibilitychange事件
- 文本框失去焦点事件、获得焦点事件
- 获得焦点事件和失去焦点事件
- 文本框失去焦点事件、获得焦点事件
- js获得焦点
- js自动获得焦点
- C# 子窗口获得焦点
- 获得焦点与失去焦点事件
- visibilitychange事件判断当前页面——可见性的状态
- C/C++ 关键字
- springCloud @GetMapping 报错
- cpu、内存、磁盘关系
- truffle与合约交互
- 程序员应该用到的配置管理
- 当前窗口获得焦点js事件【visibilitychange】
- O、Ω和Θ
- 回到顶部
- Jmeter数据库请求配置
- jQuery对象和dom对象的区别和相互转换
- zookeeper
- 关于Context的研究
- 二叉搜索树(C语言)
- 反射