H5判断页面可见性的api

来源:赵克立 分类: HTML5 标签:无发布时间:2018-08-19 14:34:44浏览:203
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
温馨提示:
技术类文章有它的时效性,请留意文章更新时间以及软件的版本
更新时间:
2018-08-19 14:34:44

一般情况下在pc上不存在这种情况,但是在移动平台上可能你在看着一个网页,突然有一个消息过来啦,于是你直接切换过云看短信去啦。这个时候这个网页就被隐藏啦看不到啦,这个状态是专门有一个api可以取到的,如下

(function(a) {
    //属性名字
    var hiddenPropertyName = '';
    //事件名字
    var visibilityChangeEventName = '';
    if (typeof document.hidden !== "undefined") {
        hiddenPropertyName = "hidden";
        visibilityChangeEventName = "visibilitychange";
    } else if (typeof document.mozHidden !== "undefined") {
        hiddenPropertyName = "mozHidden";
        visibilityChangeEventName = "mozvisibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hiddenPropertyName = "msHidden";
        visibilityChangeEventName = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hiddenPropertyName = "webkitHidden";
        visibilityChangeEventName = "webkitvisibilitychange";
    }
    var onVisibilityChange = function(e) {
        console.log(e);
        if (document[hiddenPropertyName]) {
            console.log('page hide');
        } else {
            console.log('page show');
        }
    }
    document.addEventListener(visibilityChangeEventName, onVisibilityChange, false);
})(window);

把上面代码加到页面中就可以看到效果


微信号:kelicom QQ群:215861553 紧急求助须知
留下一点心意, :)
点击更换验证码
留言