HTML 5 Page Visibility- 判斷網頁是否可視

Page Visibility是html 5新的API，可以判斷現在是不是可見狀態，如果切換到別的tab或把瀏覽器縮到最小，就可以偵測並觸發事件。一般用在js必須要不斷執行的地方，比如說time interval，或是video的播放，當使用者沒有在當前頁面，可以節省資源的浪費。

首先判斷瀏覽器

view plaincopy to clipboardprint

1. var hidden, visibilityChange;   
2. if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support   
3.     hidden = "hidden";   
4.     visibilityChange = "visibilitychange";   
5. } else if (typeof document.mozHidden !== "undefined") {   
6.     hidden = "mozHidden";   
7.     visibilityChange = "mozvisibilitychange";   
8. } else if (typeof document.msHidden !== "undefined") {   
9.     hidden = "msHidden";   
10.     visibilityChange = "msvisibilitychange";   
11. } else if (typeof document.webkitHidden !== "undefined") {   
12.     hidden = "webkitHidden";   
13.     visibilityChange = "webkitvisibilitychange";   
14. }  

然後寫判斷是否hidden，播放或暫停影片

view plaincopy to clipboardprint

1. var videoElement = document.getElementById("myvideo");   
2.     
3. // 如果hidden, 暫停影片;   
4. // 如果出現, 播放影片   
5. function handleVisibilityChange() {   
6.     if (document[hidden]) {   
7.         videoElement.pause();   
8.     } else {   
9.         videoElement.play();   
10.     }   
11. }  

最後在加這段就大功告成了

view plaincopy to clipboardprint

1. if (typeof document.addEventListener === "undefined" ||   
2.     typeof hidden === "undefined") {   
3.     alert("您的瀏覽器需要支援 Page Visibility API.");   
4. } else {   
5.     
6.     // 偵測page visibility事件    
7.     document.addEventListener(visibilityChange, handleVisibilityChange, false);   
8.         
9.     // 改變web page title 名稱   
10.     videoElement.addEventListener("timeupdate", function(){   
11.         document.title = Math.floor(videoElement.currentTime) + " second(s)";   
12.     }, false);   
13. }  

Demo
Page Visibility

參考
W3C Page Visibility
Using the PageVisibility API
Using the Page Visibility API