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

来源:赵克立博客分类: HTML5 标签：H5发布时间:2018-08-19 14:34:44最后更新:2019-04-29 17:54:52浏览:2603

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/8447.html

更新时间：

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);

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