前言

有时候我们会需要知道当前页面是否处于活动的状态，一般应用有：

1、页面有视频播放，用户暂时离开了当前页面，如何判断让播放器暂停。

2、拉取式的消息轮询api请求，如何在用户不处于页面活动状态时暂停对api的请求。

原理

从浏览器是否切换标签页和浏览器是否切屏两个方面共同监听，输出状态，使用时获取这个状态。

封装JS

page-visibility-state.js

var pvs = {
    visible: true,
    listener: function (callback, visibleCallback, hiddenCallback) {
        var that = this;
        var hidden, state, visibilityChange;
        if (typeof document.hidden !== "undefined") {
            hidden = "hidden";
            visibilityChange = "visibilitychange";
            state = "visibilityState";
        } else if (typeof document.mozHidden !== "undefined") {
            hidden = "mozHidden";
            visibilityChange = "mozvisibilitychange";
            state = "mozVisibilityState";
        } else if (typeof document.msHidden !== "undefined") {
            hidden = "msHidden";
            visibilityChange = "msvisibilitychange";
            state = "msVisibilityState";
        } else if (typeof document.webkitHidden !== "undefined") {
            hidden = "webkitHidden";
            visibilityChange = "webkitvisibilitychange";
            state = "webkitVisibilityState";
        }

        //添加监听器,监听当前是否活动页面
        document.addEventListener(visibilityChange, function() {
            var state = document[state];
            var visible = state == 'visible';
            that.visible = visible;
            if (callback) {
                callback(state, visible);
            }
            if (visibleCallback) {
                visibleCallback();
            }
            if (hiddenCallback) {
                hiddenCallback();
            }
        }, false);
        window.onblur = () => {
            that.visible = false;
            if (callback) {
                callback('visible', false);
            }
            if (hiddenCallback) {
                hiddenCallback();
            }
        }
        window.onfocus = () => {
            that.visible = true;
            if (callback) {
                callback('hidden', true);
            }
            if (visibleCallback) {
                visibleCallback();
            }
        }
    }
};

示例

以页面活动时轮询调用api为例

1、引用js

<script src="/path/to/page-visibility-state.js"></script>

2、代码

//你的获取消息ajax调用方法
function getMessages() {
    $.ajax({
        type : "POST",
        contentType: "application/json;charset=UTF-8",
        url : "/path/to/messages",
        data : {},
        success : function(result) {
            /**
             * 你的逻辑代码
             */

            //判断状态是否为当前活动的
            if (pvs.visible) {
                setTimeout(function () {
                    getMessages();
                }, 1000);
            }
        },
        error : function(e){
        }
    });
}
//调用监听
pvs.listener(function (state, visible) {
    //活动状态变更时就会执行
    //state参数，值为："visible" 和 "hidden"
    //visible参数，值为：true 和 false
}, function () {
    //活动状态变更为活动页时执行
    getMessages();
}, function () {
    //活动状态变更为不是活动页时执行
});