首頁 > web前端 > H5教程 > HTML5 visibilityState屬性詳細介紹與使用實例_html5教學技巧

HTML5 visibilityState屬性詳細介紹與使用實例_html5教學技巧

WBOY
發布: 2016-05-16 15:48:07
原創
1609 人瀏覽過

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

那麼,這個 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文件,開啟後切換標籤即可測試效果)。


複製程式碼
程式碼如下:





測試 HTML5 Page Visibility API


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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板