javascript：visibilitychange事件：監(jiān)聽頁面可見性

頁面可見性是什么？

頁面可見性api的作用是通過監(jiān)聽document的visibilitychange事件記錄當(dāng)前標(biāo)簽頁在瀏覽器中的激活狀態(tài)。所謂“激活狀態(tài)”指當(dāng)前標(biāo)簽是否正在被用戶瀏覽。

簡單的說，就是?瀏覽器標(biāo)簽頁被隱藏或顯示的時候會觸發(fā)visibilitychange事件。

用它有什么好處？

我們可以利用這個api在特定的時候避免執(zhí)行一些不必要的操作，頁面不可見時，暫停播放流媒體文件、停止一些不必要的輪詢，以減少客戶端、服務(wù)端壓力，對于節(jié)省資源和提高性能特別有用。

有哪些使用場景？

1、當(dāng)前頁面不可見時，暫停播放視頻或者音樂，當(dāng)頁面恢復(fù)可見，繼續(xù)之前播放。

2、實時輪詢的榜單頁面，當(dāng)頁面不可見時，暫停輪詢。

3、網(wǎng)頁輪播圖，只有在用戶觀看輪播時，才自動切換到下一張。

4、在客戶端內(nèi)，一個文章列表頁，點擊文章打開新的webview或者客戶端頁面瀏覽或評論，返回上一頁時，列表中該文章數(shù)據(jù)更新。

5、點擊支付跳轉(zhuǎn)到新開頁面，再返回這個頁面時彈出支付狀態(tài)相關(guān)提示彈窗。

瀏覽器兼容性

既然這么有用，肯定要看一下兼容性，能否用在項目中，下圖是截止2019年10月30日的兼容性圖表，也可點擊?can i use?網(wǎng)站查看兼容性。

移動端可以放心大膽地使用。

該API的屬性和事件

屬性

1、document.hidden

布爾值，表示標(biāo)簽頁的顯示或隱藏。

2、document.visibilityState

相對詳細(xì)一些，目前有四個可能的值：

• visible：頁面部分內(nèi)容可見。意味著該標(biāo)簽頁是一個非最小化的可見標(biāo)簽頁，可能被別的頁面覆蓋了一部分。

• hidden：頁面內(nèi)容對用戶不可見。 在實際中，這意味著文檔可以是一個后臺標(biāo)簽，或是最小化窗口的一部分，或是在操作系統(tǒng)鎖屏激活的狀態(tài)下。

• prerender：頁面內(nèi)容正在被預(yù)渲染且對用戶是不可見的(被document.hidden當(dāng)做隱藏). 文檔可能初始狀態(tài)為prerender，但絕不會從其它值轉(zhuǎn)為該值。 注釋：瀏覽器支持是可選的。

• unloaded：頁面正在從內(nèi)存中卸載。 注釋：瀏覽器支持是可選的。

注意：prerender和unloaded在chrome中測試不出來觸發(fā)場景，個人猜測并沒有支持這兩個值。MDN網(wǎng)站只有中文版有介紹這兩個屬性值，英文版只有prerender，且不建議使用。點擊進(jìn)入MDN

事件

visibilitychange：當(dāng)瀏覽器可見性發(fā)生變化的時候，這個事件會被觸發(fā)。

我們可以在document對象上注冊一個監(jiān)聽visibilitychange事件，根據(jù)document.hidden或者document.visibilityState屬性做一些業(yè)務(wù)邏輯。

注意：visibilitychange是document的事件，路由之間的跳轉(zhuǎn)，不會改變當(dāng)前頁面的可見性，頁面之間的跳轉(zhuǎn)更不會觸發(fā)該事件。

示例場景

客戶端內(nèi)嵌H5頁面經(jīng)常遇到的一個場景：H5頁面有一個視頻，正在播放時，點擊頁面其他按鈕，進(jìn)入客戶端原生頁面，或者打開一個新的webview，這時視頻應(yīng)該暫停播放，返回該頁面時，視頻繼續(xù)播放。

這種情況實現(xiàn)方法不止一個，我們這里使用這次的主角visibilitychange來實現(xiàn)。

1、先封裝一下visibilitychange事件

tools.js代碼：

varvar?handleShow,?handleHide,handleRemove,?state_name;
/**
?*?監(jiān)聽visibilitychange
?*?@param??{object}?options?可見與不可見的回調(diào)函數(shù)
?*?
?*/
export?function?onBrowserChange(options)?{
??handleShow?=?options.handleShow,
??handleHide?=?options.handleHide;
??if?(document.visibilityState?||?document.webkitVisibilityState)?{
????var?prefix?=?document.visibilityState?&&?''?||?document.webkitVisibilityState?&&?'webkit'?||?'';
????var?event_name?=?prefix?+?'visibilitychange';
????state_name?=?prefix???prefix?+?'VisibilityState'?:?'visibilityState';
????document.addEventListener(event_name,?BrowserChangeEvent);
??}
}
/**
?*?具體的事件處理函數(shù)?
?*?removeEventListener()不能移除匿名函數(shù)，我們把函數(shù)單獨提出來
?*?@param??無
?*?
?*/
function?BrowserChangeEvent()?{
??var?state?=?document[state_name];
??if?(state?===?'visible'?&&?typeof?handleShow?===?'function')?{
????handleShow();
??}?else?if?(state?===?'hidden'?&&?typeof?handleHide?===?'function')?{
????handleHide();
??}
}
/**
?*?移除監(jiān)聽visibilitychange事件
?*?@param??{object}?options?移除前的回調(diào)函數(shù)
?*?
?*/
export?function?removeBrowserChange(options)?{
??handleRemove?=?options.handleRemove;
??if?(document.visibilityState?||?document.webkitVisibilityState)?{
????var?prefix?=?document.visibilityState?&&?''?||?document.webkitVisibilityState?&&?'webkit'?||?'';
????var?event_name?=?prefix?+?'visibilitychange';
????state_name?=?prefix???prefix?+?'VisibilityState'?:?'visibilityState';
????if?(document[state_name]?===?'visible'?&&?typeof?handleRemove?===?'function')?{
??????handleRemove();
????}
????document.removeEventListener(event_name,?BrowserChangeEvent,?false);
????handleShow?=?null;
????handleHide?=?null;
????handleRemove?=null;
??}
}

<
?