H5判断页面可见(可视)性的api,判断页面是否被遮盖
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。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);
把上面代码加到页面中就可以看到效果