背景
现有一个考试项目,当在浏览器进行考试时需要判断用户是否存在切屏,如果切屏就对当前考试进行自动强制交卷。浏览器中可通过window
对象的onblur
、onfocus
判断,或者document
的hidden
属性判断。
获取焦点(onfocus)和失去焦点(onblur)
关于是否失焦点,浏览器对象有onfocus
和 onblur
事件可以监听。但是触发这两个事件的前提是页面之前是获取焦点的,就是说要是激活的。也就是说页面刚刚渲染完,用户在没有页面上任何操作时,页面是不会正常监听这两个事件的;或者页面在打开状态下,但是触发了onblur之后并无页面操作的情况下也不会正常监听这两个事件。直到,用户操作页面触发focus
,之后离开页面才会触发blur
,再次点击到当前页面时才会触发focus
,如此反复都会触发相应的事件。
onblur
- 在
chrome
浏览器下,点击console
面板也会触发blur
事件,前提是之前是focus
的状态。 - 页面最小化;
- 浏览器切换
tab
页面; - 页面中的任何弹窗;
focus
状态下切换到其他应用
onfocus
- 用户存在页面操作(包括页面中
js
脚本运行。如页面加载完无js
运行,用户无操作,则不会触发 ); - 事件触发前提下,页面最大化;
- 事件触发前提下,页面从其他
tab
页切换回当前页面;
onblur与onfocus示例
//离开
window.onblur = function () {
console&&console.log("切屏了onblur");
};
//回来
window.onfocus = function () {
console&&console.log("切屏了onfocus");
};
HTML5新增API
HTML5
新增的API
, visibilitychange
, document.hidden
, document.visibilityState
来实现相关内容。
visibilitychange
- 浏览器支持
visibilitychange
是HTML5
的API
所以支持持最新浏览器 Chrome, Firefox, IE10+ - 用
addEventListener
添加事件,当页面发生改变就会触发
老版本浏览器如果失效需要添加前缀
mozvisibilitychange
火狐msvisibilitychange
IEwebkitvisibilitychange
谷歌,Safari
document.hidden
hidden
是document
的属性,可以判断页面是否显示的是当前的页面。visibilitychange
事件就是触发页面可见的事件。当然不同的浏览器内核记得要加前缀。表示页面处于非激活状态,反之处于激活状态。
- 页面最小化
- 页面在后台运行
- 切换
tab
栏到其他页面
当其hidden
为false
的时候就是当前网页正在被用户浏览,其值为ture
就是当前网页进入后台。
document.visibilityState
visible
是浏览器当前激活,窗口不是最小化状态hidden
不是当前激活,或者窗口最小化了prerender
重新生成,对用户不可见
visibilitychange事件示例
var hiddenProperty = 'hidden' in document ? 'hidden' :
'webkitHidden' in document ? 'webkitHidden' :
'mozHidden' in document ? 'mozHidden':null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function () {
if (!document[hiddenProperty]) {
console && console.log('页面激活');
} else {
console && console.log('页面非激活');
}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
以上两种方式在某些情况下存在一定差异,可能需要组合使用或者指定使用的浏览器及版本。