HTML5實現頁面切換激活的PageVisibility API使用初探

2020-03-24 17:07:47

字體：大中小

來源：轉載

供稿：網友

HTMl5 推出了一個很特別的 API Page Visibility ，之所以說它特別，是因為這個 API 關注的是一個很少人留意的功能瀏覽器標簽( tab ) 是否被激活。這里必須解釋一下，這個激活，指的是這個標簽是否正被用戶瀏覽，或者說是否為當前標簽。那么，這個 API 究竟有些什么用途呢？通常，很多傳統的頁面在用戶沒有激活它的時候，它還會繼續工作，例如，當用戶正在瀏覽新聞門戶，而他之前打開的 NBA 球賽頁面會繼續刷新獲取最新結果，視頻網站會繼續占用帶寬加載資源，于是，如果這類不必要的工作太多了，就會造成很多的資源浪費。因此，這貨相當有用：Web 程序每隔一段時間會自動更新頁面信息，確保用戶獲取到及時的信息，但是，當用戶正在瀏覽其他頁面時，可以控制它暫停更新。
視頻網站在播放在線視頻時會不斷加載視頻，直到視頻加載完畢，但是，當用戶正在瀏覽其他頁面時，可以暫停加載視頻資源，節省帶寬。
網站首頁上有個大幻燈自動播放，當用戶瀏覽其他頁面了，就可以暫停播放。
于是，通過 Page Visibility ，我們可以至少達到以下一種或幾種的好處：1.節省服務器資源，html' target='_blank'>Ajax 輪詢這類服務器資源占用常常會被忽略，關閉這種請求可以節省資源。
2.節省內存消耗。
3.節省帶寬消耗。
因此，使用 Page Visibility 無論是對于用戶還是服務器都有好處。接下來正式介紹一下這個 API 。Page Visibility 會在瀏覽器的 document 對象上添加兩個屬性 hidden 和 visibilityState 。如果當前的標簽被激活了，那么 document.hidden 的值為 false ，否則為 true 。visibilityState 則有4個可能值：hidden：當瀏覽器最小化、切換標簽、電腦鎖屏時 visibilityState 值是 hidden
visible：當瀏覽器最頂級上下文（context）的 document 至少顯示在一個屏幕當中時，返回 visible；當瀏覽器窗口沒有最小化，但是瀏覽器被其他應用遮擋時，這時也為 visible
prerender：當文檔被加載到屏幕畫面以外或者不可見時返回 prerender，這個是非必要屬性，瀏覽器可選擇性的支持。
unloaded：當文檔將要被離開 ( unload ）時返回 unloaded，瀏覽器也可選擇性的支持這個屬性
另外，document 上會添加 visibilitychange 事件，當 document 的可見性改變時觸發該事件。好了，介紹完屬性，放上一個 Demo （打開后切換標簽即可測試）。這個 Demo 的作用是監聽標簽的可見性是否改變，并且在標簽可見性發生改變時產生提示。值得注意的是，在目前，瀏覽器對于 Page Visibility 的支持還是通過私有屬性支持，因此在檢測或利用 Page Visibility 提供的屬性時需要加上瀏覽器私有前綴，例如在 Chrome 中檢測上面的 visibilityState 屬性時，就需要檢測 document.webkitVisibilityState 而不是 document.visibilityState 。所以，Demo 中會首先檢測瀏覽器類型，然后才使用 Page Visibility 的 API 。主要代碼如下：JavaScript Code復制內容到剪貼板
['webkit','moz','o','ms'].forEach(function(prefix){ if(typeofdocument[prefix+'Hidden']!='undefined'){ result=prefix; } }); returnresult; } functioninit(){ prefix=browerKernel(); varshowTip=document.getElementById('showTip'); document.addEventListener(prefix+'visibilitychange',functiononVisibilityChange(e){ vartip=null; if(document[prefix+'VisibilityState']=='hidden')tip=' p 離開頁面 /p '; elseif(document[prefix+'VisibilityState']=='visible')tip=' p 進入頁面 /p '; showTip.innerHTML=showTip.innerHTML+tip; }); } window.onload=init();
scripttype= text/javascript timer=0; functiononLoad(){ document.addEventListener( visibilitychange ,stateChanged); document.addEventListener( webkitvisibilitychange ,stateChanged); document.addEventListener( msvisibilitychange ,stateChanged); } functionstateChanged(){ console.log(document.webkitVisibilityState); if(document.hidden||document.webkitHidden||document.msHidden){ //newtaborwindowminimized timer=newDate().getTime(); } else{ alert('Youwereawayfor'+(newDate().getTime()-timer)/1000+'seconds.') } } /script /head bodyonLoad= onLoad() /body /html
在上面的代碼中,同樣,在CHROME運行下,在LOAD事件中,監聽了相關的 webkitvisibilitychange事件(這個在CHROME下),如果是IE 10,則是 msvisibilitychange事件,然后在回調函數中,開始了計算用戶在頁面停留的時間, 所以當你打開其他TAB頁或者最小化后,再切換回原來這個頁,則會JAVASCRIPT 彈出顯示:你離開了頁面多長時間。
要注意的是,在CHROME中,屬性命名為webkitHidden,事件為 webkitvisibilitychange事件,而在IE 10中,屬性為msHidden 和 msVisibilityState.html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML head 頭標簽詳細介紹

下一篇：在IE6系列等老式瀏覽器中使用HTML5的新標簽實現方案