document API之visibilitychange事件：判斷頁

下面將對document事件visibilitychange及兩個屬性hidden和visibilityState的特性及應用做簡單介紹與記錄。

hidden和visibilieyState屬性

hidden與visibilityState均為document的只讀屬性。

其中document.hidden的值是一個布林值，表示標籤頁的顯示或隱藏。

而document.visibilityState相對詳細一些，目前有四個可能的值：

• visibble：頁面部分內容可見。意味著該標籤頁是一個非最小化的可見標籤頁，可能被別的頁面覆蓋了一部分。

• hidden:頁面內容不可見。意味著該頁面是後臺標籤頁或者最小化，或者系統是鎖屏狀態等。

• prerender:網頁內容被預渲染並且使用者不可見。

• unloaded:如果文件被解除安裝，將返回這個值。

一般情況下，使用document.hidden就可以滿足需求。為了支援老版本瀏覽器，我們對document.hidden做一些字首處理，以便跨瀏覽器獲得頁面可見性：

function getHidden (){    let prefixs = ['webkit','moz','mos','o'];    if ('hidden' in document) return document.hidden;    for (let i = 0; i 
同樣，對document.visibilityState也做一下字首處理：
function getVivibilityState (){    let prefixs = ['webkit','moz','mos','o'];    if ('visibilityState' in document) return document.visibilityState;    for (let i = 0; i 
visibilitychange事件
當瀏覽器可見性發生變化得時候，這個事件會被觸發。實際的應用場景例如：標籤頁隱藏的時候暫停播放流媒體檔案、停止一些不必要的輪詢；頁面顯示的時候出現提示彈窗（點選支付跳轉到新開頁面，再返回這個頁面時彈出支付狀態相關提示彈窗）等等。
我們可以在document物件上註冊一個監聽visibilititychange  的事件，當瀏覽器可見性發生變化的時候利用hidden或者visibilityState判斷頁面的狀態，然後處理一些業務邏輯。以比較常用的hidden為例：
function pageHiddenHandler () {    let isHidden = getHidden();    // 改變頁面title使用者觀察狀態
    document.title = isHidden ? '藏起來了' : '閃現';
}document.addEventListener('visibilitychange',pageHiddenHandler,false);


作者：搞點兒事情
連結：