頁面可見性是什么？

頁面可見性api的作用是通過監聽document的visibilitychange事件記錄當前標簽頁在瀏覽器中的激活狀態。所謂“激活狀態”指當前標簽是否正在被用戶瀏覽。

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

用它有什么好處？

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

有哪些使用場景？

1、當前頁面不可見時，暫停播放視頻或者音樂，當頁面恢復可見，繼續之前播放。

2、實時輪詢的榜單頁面，當頁面不可見時，暫停輪詢。

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

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

5、點擊支付跳轉到新開頁面，再返回這個頁面時彈出支付狀態相關提示彈窗。

瀏覽器兼容性

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

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

該API的屬性和事件

屬性

1、document.hidden

布爾值，表示標簽頁的顯示或隱藏。

2、document.visibilityState

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

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

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

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

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

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

事件

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

我們可以在document對象上注冊一個監聽visibilitychange事件，根據document.hidden或者document.visibilityState屬性做一些業務邏輯。

注意：visibilitychange是document的事件，路由之間的跳轉，不會改變當前頁面的可見性，頁面之間的跳轉更不會觸發該事件。

示例場景

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

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

1、先封裝一下visibilitychange事件

tools.js代碼：

varvar?handleShow,?handleHide,handleRemove,?state_name;
/**
?*?監聽visibilitychange
?*?@param??{object}?options?可見與不可見的回調函數
?*?
?*/
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);
??}
}
/**
?*?具體的事件處理函數?
?*?removeEventListener()不能移除匿名函數，我們把函數單獨提出來
?*?@param??無
?*?
?*/
function?BrowserChangeEvent()?{
??var?state?=?document[state_name];
??if?(state?===?'visible'?&&?typeof?handleShow?===?'function')?{
????handleShow();
??}?else?if?(state?===?'hidden'?&&?typeof?handleHide?===?'function')?{
????handleHide();
??}
}
/**
?*?移除監聽visibilitychange事件
?*?@param??{object}?options?移除前的回調函數
?*?
?*/
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;
??}
}

<
?