## 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] ); }); ```