主頁 > 知識庫 > HTML5實現(xiàn)頁面切換激活的PageVisibility API使用初探

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

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

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

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

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

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

接下來正式介紹一下這個 API 。Page Visibility 會在瀏覽器的 document 對象上添加兩個屬性 hidden 和 visibilityState 。如果當前的標簽被激活了，那么 document.hidden 的值為 false ，否則為 true 。visibilityState 則有4個可能值：

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

好了，介紹完屬性，放上一個 Demo （打開后切換標簽即可測試）。

這個 Demo 的作用是監(jiān)聽標簽的可見性是否改變，并且在標簽可見性發(fā)生改變時產(chǎn)生提示。

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

JavaScript Code復(fù)制內(nèi)容到剪貼板

function browerKernel(){
var result;
['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){
if( typeof document[ prefix + 'Hidden' ] != 'undefined' ){
result = prefix;
}
});
return result;
}
function init(){
prefix = browerKernel();
var showTip = document.getElementById('showTip');
document.addEventListener( prefix + 'visibilitychange', function onVisibilityChange(e){
var tip = null;
if( document[ prefix + 'VisibilityState' ] == 'hidden' ) tip = '<p>離開頁面</p>';
else if( document[ prefix + 'VisibilityState' ] == 'visible' ) tip = '<p>進入頁面</p>';
showTip.innerHTML = showTip.innerHTML + tip;
});
}
window.onload = init();

再再來看一個具體的例子,代碼如下:

JavaScript Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
timer = 0;
function onLoad(){
document.addEventListener("visibilitychange",stateChanged);
document.addEventListener("webkitvisibilitychange", stateChanged);
document.addEventListener("msvisibilitychange", stateChanged);
}
function stateChanged(){
console.log(document.webkitVisibilityState);
if(document.hidden || document.webkitHidden || document.msHidden){
//new tab or window minimized
timer = new Date().getTime();
}
else {
alert('You were away for ' + (new Date().getTime()-timer)/1000+ ' seconds.')
}
}
</script>
</head>
<body onLoad="onLoad()">
</body>
</html>

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

標簽：煙臺賀州湘潭湖北通遼懷化黃山山南

巨人網(wǎng)絡(luò)通訊聲明：本文標題《HTML5實現(xiàn)頁面切換激活的PageVisibility API使用初探》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。