随笔- 105 文章- 0 评论- 12 阅读- 26万

visibilitychange前端监测页面进入前台还是后台（页面最小化，开新菜单等）

引入：https://www.html.cn/archives/6103

考试系统的项目，页面需要做个定时器，考试结束前五分钟弹窗提示考试即将结束，考试时间到自动交卷

一、碰到的问题

　　1）因为考生可以搜索答案，所以考试页面可能会被最小化，或者在考试页面旁边新开一个窗口，鉴于浏览器的保护资源机制，页面在最小化或者不可见时资源会被释放，js脚本不会执行，windows系统可见定时器不走或者走得慢，苹果浏览器js停止

二、解决方法

　　使用visibilitychange事件，监听页面是在前台还是后台，进入后台清除定时器，进入前台启动定时器。

　　visibilitychange事件有兼容性问题，以下代码为兼容处理，自测谷歌，360，ie11没有问题

function getHiddenProp() {
        var prefixes = ['webkit', 'moz', 'ms', 'o'];
 
        // if 'hidden' is natively supported just return it
        if ('hidden' in document) return 'hidden';
 
        // otherwise loop over all the known prefixes until we find one
        for (var i = 0; i < prefixes.length; i++) {
            if ((prefixes[i] + 'Hidden') in document)
                return prefixes[i] + 'Hidden';
        }
 
        // otherwise it's not supported
        return null;
    }
function getVisibilityState() {
    var prefixes = ['webkit', 'moz', 'ms', 'o'];
    if ('visibilityState' in document) return 'visibilityState';
    for (var i = 0; i < prefixes.length; i++) {
        if ((prefixes[i] + 'VisibilityState') in document)
            return prefixes[i] + 'VisibilityState';
    }
    // otherwise it's not supported
    return null;
}
 
function isHidden() {
       var prop = getHiddenProp();
        if (!prop) return false;
 
        return document[prop];
}
 
// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
    var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
    document.addEventListener(evtname, function () {
         console.log(document[getVisibilityState()])
　　　　　　　　if(document[getVisibilityState()] == 'hidden'){
　　　　　　　　　　console.log("页面进入后台")
　　　　　　　　} else{　
　　　　　　　　　　console.log("页面进入前台")
　　　　　　　　}
　　},false); 
}