PageVisibility API
1、PageVibility
PageVisibility API是用于判断页面是否处于浏览器的当前窗口,即是否可见。
这API是部署在document
对象上的。
1.1 属性
它有两个属性:
document.hidden
:返回一个布尔值,表示当前是否被隐藏,只读document.visibilityState
:只读,表示页面当前的状态,有四个可能值:visibile
(页面可见)、hidden
(页面不可见)、prerender
(页面正处于渲染之中,不可见)、unloaded
(如果文档被卸载了)
在使用这两个属性时,要加上不同浏览器的私有前缀:
获取hidden
属性值:
function getHiddenProp() {
var prefixes = ["webkit", "moz", "ms", "o"];
if ( "hidden" in document) return "hidden;
for(var i = 0; i < prefixes.length; i++) {
var hidden = prefixes[i] + "Hidden";
if( hidden in document) {
return hidden;
}
};
return null;
}
获取visibilityState
属性
function getVisibilityState() {
var prefixes = ["webkit", "moz", "ms", "o"];
if ( "visibilityState" in document) return "visibilityState;
for(var i = 0; i < prefixes.length; i++) {
var visibilityState = prefixes[i] + "VisibilityState";
if( hidden in document) {
return visibilityState;
}
};
return null;
}
1.2 事件
当页面的可见状态发生变化时,会触发visibilityChange
事件(也是需要加上私有前缀)
var hidden = getHiddenProp();
var visibilityChange = hidden.split(/[H|h]/, "")[0] + "visibilitychange";
document.addEventListener(visibilityChange, function(){
console.log( document[getVisibilityState] );
});