Page Visibility API
最后更新于：2022-04-01 23:54:40
## PageVisibility
**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] );
});
```
';