html5 获得窗口焦点和失去窗口焦点
当前窗口获得焦点js事件,html5发布之前我们使用window.onfocus和window.onblur来获得窗口焦点和失去窗口焦点,
监听 onfocus() 和window.onblur()事件实现
//当前窗口得到焦点
window.onfocus = function() { //播放动画或视频
}; //当前窗口失去焦点
window.onblur = function() { //暂停动画或视频
};
这个方法可以实现切换标签暂停动画视频,但是会带来一个问题,由于是判断焦点,如果是在当前页面上铺上一个小窗口,那当前页面就暂停了动画,试想,如果你一边看片,一边开个聊天窗口与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 的值,根据该值进行页面一些事件的处理。
document.addEventListener('visibilitychange', function() { var isHidden = document.hidden; if (isHidden) { // 动画视频暂停 } else { // 动画视频开始 }
});
结合demo中的实例,切换标签或者最小化的时候,demo中的视频会暂停,恢复当前页面时,demo中的视频会继续播放。完整的代码如下:
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange";
} var videoElement = document.getElementById("videoElement"); // 如果页面被隐藏,则暂停播放,如果页面恢复,则继续播放
function handleVisibilityChange() { if (document[hidden]) { videoElement.pause(); } else { videoElement.play(); }
} // 判断浏览器的支持情况
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") { consol.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else { // 监听visibilityChange事件 document.addEventListener(visibilityChange, handleVisibilityChange, false); // 当播放器暂停的时候,将页面标题设置为:Paused. videoElement.addEventListener("pause", function(){ document.title = 'Paused'; }, false); // 当播放器正常播放时,将页面标题设置为:Playing. videoElement.addEventListener("play", function(){ document.title = 'Playing'; }, false);
}
html5 获得窗口焦点和失去窗口焦点相关推荐
- C#代码像QQ的右下角消息框一样,无论现在用户的焦点在哪个窗口,消息框弹出后都不影响焦点的变化,那么有两种方法...
你QQ的右下角消息框一样,无论现在用户的焦点在哪个窗口,消息框弹出后都不影响焦点的变化,那么有两种方法: 要么重写需要弹出的窗体的事件: protected override CreateParams ...
- jquery 控制frameset frame节点内容(在子窗口中把该窗口中的焦点处的text内容填
2019独角兽企业重金招聘Python工程师标准>>> 现在做这个项目中,有一项把:在子窗口中把该窗口中的焦点处的text内容填入其它子窗口的input内,也就是改写input的va ...
- html字段隐藏,HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段)
内容介绍热点排行相关文章下载地址↓ 效果非常不错的登录窗口,输入框获取焦点后会自动隐藏默认文本,如果为空会提示必填字段 ,经测试,效果相当不错,感兴趣的朋友可以参考下哈 在网页head区添加以下代码 ...
- html5文本框获取焦点,文本框获得焦点和失去焦点的判断代码
文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后, ...
- html5 自动失去焦点,js input失去焦点事件
JS中,何为鼠标失去焦点事件??是onmouseout事件. 用法举例: 鼠标离开文本框的时候触发JS的chk()方法. js 怎样判断ipunt失去焦点 js input失去焦点事件 onfocus ...
- MFC模态窗口与非模态窗口
MFC模态窗口与非模态窗口 开发工具与关键技术:C++.VisualStudio 作者:何任贤 撰写时间:2019年07月25日 模态窗口的意思是指主窗口在打开模态窗口后,没法再操作主窗口,这就是模态 ...
- javafx一个stage窗口弹出,主窗口跟随弹出(聚焦二级窗口时,在二级窗口后面显示主窗口)
javafx编写的程序存在隐藏程序后打开二级窗口,只有二级窗口弹出(图1),而非二级窗口与主窗口一起弹出(图2),解决方法如代码 图1 图二 方法一:当前窗口出现后置顶主窗口,再置顶当前窗口,会出现闪 ...
- wxpython分割窗口_wxPython实现分隔窗口
本文实例为大家分享了wxPython分隔窗口的具体代码,供大家参考,具体内容如下 1.分割窗口 分隔窗口(wx.SplitterWindow)就是将窗口分成两部分,即左右或上下两部分,如下图所示窗口, ...
- python tkinter设置窗口大小_Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例...
我就废话不多说了.大家直接看代码吧! #!/usr/bin/env python #coding=utf-8 ''' 窗口屏幕居中,设置窗口最大,最小尺寸... 版权所有 2014 yao_yu (h ...
最新文章
- 类似于HttpModule的注入方式的事件机制示例
- lex编译dos命令_微软新的命令行工具:Windows Terminal
- 对cv::findHomography未定义的引用的解决方法
- python使用spark sql查询impala_如何使用JDBC将Impala表直接加载到Spark?
- 设计模式--缺省适配模式
- 企业应用中的作业调度
- 基于JAVA+SpringMVC+Mybatis+MYSQL的旅游景点门票售票管理系统
- 开课吧9.9元学python靠谱吗-9月程序员工资出炉,女朋友嫌我薪资要少了
- android 获取程序名,Android_Android获取应用程序名称(ApplicationName)示例,MainActivity如下: 复制代码 代码 - phpStudy...
- centos 常用的网络登录端口测试工具
- godot初体验,开源跨平台的神奇游戏引擎。支持python和rust,甚至推出了android端。
- a3967驱动_Arduino A3967 步进电机驱动板 EasyDriver Stepper Motor
- python十以内加减法_【小学】 生成10以内的加减法
- Zephyr RTOS -- FIFO (LIFO)
- Deepfake——深度造假视频在智能城市中的风险
- Mac Electron App 签名后打开闪退
- 评论回复功能 asp.net_微信重大更新!公众号推送时间线打乱+7大新功能上线!怎么玩?...
- 自动跟随小车c语言,智能小车跟随系统的设计与制作.doc
- 湖南大学头歌期中模拟试卷
- MYSQL 删除百万级数据
热门文章
- 计算机知识音频转换,电脑小常识:笔杆子怎么录音转文字
- 2022-2028年全球与中国射频识别打印机行业深度分析
- mac上的ssh连接工具
- SysML实践指南第二版(中文翻译:刘亚龙)第五章-SysML语言框架
- cdn服务器pnk_如何搭建自己CDN服务器
- 值得期待!中兴新支点4G多卡聚合技术将融合到新型导播机
- CAA教程——CATIA二次开发环境搭建
- Particle Builder Elemental Pack for Mac(ae粒子特效模板)
- pstools使用教程
- 基于Java+springmvc+mysql+jquery实现企业员工管理系统