H5判断页面可见(可视)性的api,判断页面是否被遮盖

来源:赵克立博客 分类: HTML5 标签:H5发布时间:2018-08-19 14:34:44最后更新:2019-04-29 17:54:52浏览:2297
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2019-04-29 17:54:52
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

一般情况下在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 紧急求助须知
Win32/PHP/JS/Android/Python