背景

现有一个考试项目，当在浏览器进行考试时需要判断用户是否存在切屏，如果切屏就对当前考试进行自动强制交卷。浏览器中可通过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 IE
  • webkitvisibilitychange 谷歌，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);

以上两种方式在某些情况下存在一定差异，可能需要组合使用或者指定使用的浏览器及版本。

(adsbygoogle = window.adsbygoogle || []).push({});