Javascript判断当前页面是否处于激活状态

背景

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

以上两种方式在某些情况下存在一定差异，为了实现一些需求，可能需要组合使用。

转载请注明：清风亦平凡 » Javascript判断当前页面是否处于激活状态