DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5 visibilityState屬性詳細介紹和使用實例
HTML5 visibilityState屬性詳細介紹和使用實例
編輯:HTML5詳解     

這裡必須解釋一下,這個“激活”,指的是這個標簽是否正被用戶浏覽,或者說是否為當前標簽。

那麼,這個 API 究竟有些什麼用途呢?通常,很多傳統的頁面在用戶沒有激活它的時候,它還會繼續工作,例如,當用戶正在浏覽新聞門戶,而他之前打開的 NBA 球賽頁面會繼續刷新獲取最新結果,視頻網站會繼續占用帶寬加載資源,於是,如果這類不必要的工作太多了,就會造成很多的資源浪費。因此,這貨相當有用:

1.Web 程序每隔一段時間會自動更新頁面信息,確保用戶獲取到及時的信息,但是,當用戶正在浏覽其他頁面時,可以控制它暫停更新。
2.視頻網站在播放在線視頻時會不斷加載視頻,直到視頻加載完畢,但是,當用戶正在浏覽其他頁面時,可以暫停加載視頻資源,節省帶寬。
3.網站首頁上有個大幻燈自動播放,當用戶浏覽其他頁面了,就可以暫停播放。

於是,通過 Page Visibility ,我們可以至少達到以下一種或幾種的好處:

1.節省服務器資源,AJax 輪詢這類服務器資源占用常常會被忽略,關閉這種請求可以節省資源。
2.節省內存消耗。
3.節省帶寬消耗。

因此,使用 Page Visibility 無論是對於用戶還是服務器都有好處。

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

1.hidden:當浏覽器最小化、切換標簽、電腦鎖屏時 visibilityState 值是 hidden
2.visible:當浏覽器最頂級上下文(context)的 document 至少顯示在一個屏幕當中時,返回 visible;當浏覽器窗口沒有最小化,但是浏覽器被其他應用遮擋時,這時也為 visible
3.prerender:當文檔被加載到屏幕畫面以外或者不可見時返回 prerender,這個是非必要屬性,浏覽器可選擇性的支持。
4.unloaded:當文檔將要被離開 ( unload ) 時返回 unloaded,浏覽器也可選擇性的支持這個屬性

另外,document 上會添加 visibilitychange 事件,當 document 的可見性改變時觸發該事件。

好了,介紹完屬性,放上一個使用實例(復制代碼保存到一個Html文件,打開後切換標簽即可測試效果)。


復制代碼代碼如下:
<!doctype Html>
<Html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>測試 Html5 Page Visibility API</title>
</head>
<body></p><p> <div id="showTip"></div>
<script>
function browerKernel(){
var result;
['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){</p><p> 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();
</script>
</body>
</Html>

這個實例的作用是監聽標簽的可見性是否改變 ,並且在標簽可見性發生改變時產生提示。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved