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文件，開啟後切換標籤即可測試效果）。

複製程式碼

程式碼如下:

<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 。