這篇文章主要介紹了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)瀏覽器最頂級(jí)上下文（context）的 document 至少顯示在一個(gè)屏幕當(dāng)中時(shí)，返回 visible；當(dāng)瀏覽器窗口沒(méi)有最小化，但是瀏覽器被其他應(yīng)用遮擋時(shí)，這時(shí)也為 visible
prerender：當(dāng)文檔被加載到屏幕畫(huà)面以外或者不可見(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 的作用是監(jiān)聽(tīng)標(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 。主要代碼如下：
JavaScript Code
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>離開(kāi)頁(yè)面</p>';
else if( document[ prefix + 'VisibilityState' ] == 'visible' ) tip = '<p>進(jìn)入頁(yè)面</p>';
showTip.innerHTML = showTip.innerHTML + tip;
});
}
window.onload = init();
再再來(lái)看一個(gè)具體的例子,代碼如下:
JavaScript Code
<!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運(yùn)行下,在LOAD事件中,監(jiān)聽(tīng)了相關(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ì)JAVASCRIPT 彈出顯示:你離開(kāi)了頁(yè)面多長(zhǎng)時(shí)間 。
要注意的是,在CHROME中,屬性命名為webkitHidden,事件為 webkitvisibilitychange事件,而在IE 10中,屬性為msHidden 和 msVisibilityState.
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試