HTML5實(shí)現(xiàn)頁(yè)面切換激活的PageVisibility API使用初探

Kayo 發(fā)布時(shí)間：2016-05-13 11:16:24 作者：Kayo Lee

這篇文章主要介紹了HTML5實(shí)現(xiàn)頁(yè)面切換激活的PageVisibility API使用初探,PageVisibility可以使我們?cè)谇袚Q瀏覽器tab頁(yè)面時(shí)自動(dòng)停止和播放視頻,需要的朋友可以參考下

HTMl5 推出了一個(gè)很“特別”的 API Page Visibility ，之所以說(shuō)它特別，是因?yàn)檫@個(gè) API 關(guān)注的是一個(gè)很少人留意的功能 —— 瀏覽器標(biāo)簽( tab ) 是否被激活。這里必須解釋一下，這個(gè)“激活”，指的是這個(gè)標(biāo)簽是否正被用戶瀏覽，或者說(shuō)是否為當(dāng)前標(biāo)簽。

那么，這個(gè) API 究竟有些什么用途呢？通常，很多傳統(tǒng)的頁(yè)面在用戶沒(méi)有激活它的時(shí)候，它還會(huì)繼續(xù)工作，例如，當(dāng)用戶正在瀏覽新聞門戶，而他之前打開(kāi)的 NBA 球賽頁(yè)面會(huì)繼續(xù)刷新獲取最新結(jié)果，視頻網(wǎng)站會(huì)繼續(xù)占用帶寬加載資源，于是，如果這類不必要的工作太多了，就會(huì)造成很多的資源浪費(fèi)。因此，這貨相當(dāng)有用：

Web 程序每隔一段時(shí)間會(huì)自動(dòng)更新頁(yè)面信息，確保用戶獲取到及時(shí)的信息，但是，當(dāng)用戶正在瀏覽其他頁(yè)面時(shí)，可以控制它暫停更新。
視頻網(wǎng)站在播放在線視頻時(shí)會(huì)不斷加載視頻，直到視頻加載完畢，但是，當(dāng)用戶正在瀏覽其他頁(yè)面時(shí)，可以暫停加載視頻資源，節(jié)省帶寬。
網(wǎng)站首頁(yè)上有個(gè)大幻燈自動(dòng)播放，當(dāng)用戶瀏覽其他頁(yè)面了，就可以暫停播放。
于是，通過(guò) Page Visibility ，我們可以至少達(dá)到以下一種或幾種的好處：

1.節(jié)省服務(wù)器資源，Ajax 輪詢這類服務(wù)器資源占用常常會(huì)被忽略，關(guān)閉這種請(qǐng)求可以節(jié)省資源。
2.節(jié)省內(nèi)存消耗。
3.節(jié)省帶寬消耗。

因此，使用 Page Visibility 無(wú)論是對(duì)于用戶還是服務(wù)器都有好處。

接下來(lái)正式介紹一下這個(gè) API 。Page Visibility 會(huì)在瀏覽器的 document 對(duì)象上添加兩個(gè)屬性 hidden 和 visibilityState 。如果當(dāng)前的標(biāo)簽被激活了，那么 document.hidden 的值為 false ，否則為 true 。visibilityState 則有4個(gè)可能值：

hidden：當(dāng)瀏覽器最小化、切換標(biāo)簽、電腦鎖屏?xí)r visibilityState 值是 hidden
visible：當(dāng)瀏覽器上下文（context）的 document 至少顯示在一個(gè)屏幕當(dāng)中時(shí)，返回 visible；當(dāng)瀏覽器窗口沒(méi)有最小化，但是瀏覽器被其他應(yīng)用遮擋時(shí)，這時(shí)也為 visible
prerender：當(dāng)文檔被加載到屏幕畫面以外或者不可見(jiàn)時(shí)返回 prerender，這個(gè)是非必要屬性，瀏覽器可選擇性的支持。
unloaded：當(dāng)文檔將要被離開(kāi) ( unload ）時(shí)返回 unloaded，瀏覽器也可選擇性的支持這個(gè)屬性
另外，document 上會(huì)添加 visibilitychange 事件，當(dāng) document 的可見(jiàn)性改變時(shí)觸發(fā)該事件。

好了，介紹完屬性，放上一個(gè) Demo （打開(kāi)后切換標(biāo)簽即可測(cè)試）。

這個(gè) Demo 的作用是看標(biāo)簽的可見(jiàn)性是否改變，并且在標(biāo)簽可見(jiàn)性發(fā)生改變時(shí)產(chǎn)生提示。

值得注意的是，在目前，瀏覽器對(duì)于 Page Visibility 的支持還是通過(guò)私有屬性支持，因此在檢測(cè)或利用 Page Visibility 提供的屬性時(shí)需要加上瀏覽器私有前綴，例如在 Chrome 中檢測(cè)上面的 visibilityState 屬性時(shí)，就需要檢測(cè) document.webkitVisibilityState 而不是 document.visibilityState 。所以，Demo 中會(huì)首先檢測(cè)瀏覽器類型，然后才使用 Page Visibility 的 API 。主要代碼如下：

在上面的代碼中,同樣,在CHROME運(yùn)行下,在LOAD事件中,相關(guān)的 webkitvisibilitychange事件(這個(gè)在CHROME下),如果是IE 10,則是 msvisibilitychange事件,然后在回調(diào)函數(shù)中,開(kāi)始了計(jì)算用戶在頁(yè)面停留的時(shí)間, 所以當(dāng)你打開(kāi)其他TAB頁(yè)或者最小化后,再切換回原來(lái)這個(gè)頁(yè),則會(huì)彈出顯示:你離開(kāi)了頁(yè)面多長(zhǎng)時(shí)間。
要注意的是,在CHROME中,屬性命名為webkitHidden,事件為 webkitvisibilitychange事件,而在IE 10中,屬性為msHidden 和 msVisibilityState.