document API之visibilitychange事件：判斷頁面可見性

Patricklea發表於2018-07-22
API事件

下面將對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 < prefixs.length; i++) {
        if (`${prefixs[i]}Hidden` in document){
            return document[`${prefixs[i]}Hidden`];
        }
    }
    // not support
    return null;
}
複製程式碼

同樣，對document.visibilityState也做一下字首處理：

function getVivibilityState (){
    let prefixs = ['webkit','moz','mos','o'];
    if ('visibilityState' in document) return document.visibilityState;
    for (let i = 0; i < prefixs.length; i++) {
        if (`${prefixs[i]}VisibilityState` in document){
            return document[`${prefixs[i]}VisibilityState`];
        }
    }
    // not support
    return null;
}
複製程式碼

visibilitychange事件

當瀏覽器可見性發生變化得時候，這個事件會被觸發。實際的應用場景例如：標籤頁隱藏的時候暫停播放流媒體檔案、停止一些不必要的輪詢；頁面顯示的時候出現提示彈窗（點選支付跳轉到新開頁面，再返回這個頁面時彈出支付狀態相關提示彈窗）等等。

我們可以在document物件上註冊一個監聽visibilititychange 的事件，當瀏覽器可見性發生變化的時候利用hidden或者visibilityState判斷頁面的狀態，然後處理一些業務邏輯。以比較常用的hidden為例：

function pageHiddenHandler () {
    let isHidden = getHidden();
    // 改變頁面title使用者觀察狀態
    document.title = isHidden ? '藏起來了' : '閃現';
}
document.addEventListener('visibilitychange',pageHiddenHandler,false);
複製程式碼

相關文章