document API之visibilitychange事件:判斷頁

choubou發表於2021-09-09

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

hidden和visibilieyState屬性

hiddenvisibilityState均為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);



作者:搞點兒事情
連結:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4548/viewspace-2812557/,如需轉載,請註明出處,否則將追究法律責任。

相關文章