javascript：visibilitychange事件：監(jiān)聽(tīng)頁(yè)面可見(jiàn)性

頁(yè)面可見(jiàn)性是什么？

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

簡(jiǎn)單的說(shuō)，就是?瀏覽器標(biāo)簽頁(yè)被隱藏或顯示的時(shí)候會(huì)觸發(fā)visibilitychange事件。

用它有什么好處？

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

有哪些使用場(chǎng)景？

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

2、實(shí)時(shí)輪詢(xún)的榜單頁(yè)面，當(dāng)頁(yè)面不可見(jiàn)時(shí)，暫停輪詢(xún)。

3、網(wǎng)頁(yè)輪播圖，只有在用戶(hù)觀看輪播時(shí)，才自動(dòng)切換到下一張。

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

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

瀏覽器兼容性

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

移動(dòng)端可以放心大膽地使用。

該API的屬性和事件

屬性

1、document.hidden

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

2、document.visibilityState

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

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

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

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

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

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

事件

visibilitychange：當(dāng)瀏覽器可見(jiàn)性發(fā)生變化的時(shí)候，這個(gè)事件會(huì)被觸發(fā)。

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

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

示例場(chǎng)景

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

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

1、先封裝一下visibilitychange事件

tools.js代碼：

varvar?handleShow,?handleHide,handleRemove,?state_name;
/**
?*?監(jiān)聽(tīng)visibilitychange
?*?@param??{object}?options?可見(jiàn)與不可見(jiàn)的回調(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ù)單獨(dú)提出來(lái)
?*?@param??無(wú)
?*?
?*/
function?BrowserChangeEvent()?{
??var?state?=?document[state_name];
??if?(state?===?'visible'?&&?typeof?handleShow?===?'function')?{
????handleShow();
??}?else?if?(state?===?'hidden'?&&?typeof?handleHide?===?'function')?{
????handleHide();
??}
}
/**
?*?移除監(jiān)聽(tīng)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;
??}
}

<
?