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