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

HTML 5

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

首先判斷瀏覽器
  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,播放或暫停影片
  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. }  

最後在加這段就大功告成了
  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



留言