JavaScript監聽頁面可見性（焦點）同時改變title的三種方法

JavaScript監聽頁面可見性（焦點）同時改變title的三種方法

---

本文參考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API

• onfocus onblur

  window.onfocus = function() { 
    console.log("onfocus");
    document.title="在這";
  };
  window.onblur=function(){
    console.log("onblur");
    document.title="離開了";
  }
  

  通過改變標簽頁 title 可清楚看到變化
  下面是html5提供的方法

  ---

• visibilitychange 事件

  瀏覽器標簽頁被隱藏或顯示的時候會觸發visibilitychange事件。經測試（Chorme），瀏覽器最小化也會觸發該事件。
  可以用addEventListener()向document添加監聽事件,也可以直接寫成document.onvisibilitychange = function() {......}

1. document.hidden

   如果頁面處於被認為是對用戶隱藏狀態時返回true，否則返回false。
   
   使用addEventListener向document添加監聽事件，false是addEventListener默認的一個參數，可以不寫
   

   function handleVisibilityChange() {
   if (document.hidden) {
   	document.title="離開了";
   } else  {
    	document.title="在這";
   }
   }
   document.addEventListener("visibilitychange", handleVisibilityChange, false);
   

2. document.visibilityState

   是一個用來展示文檔可見性狀態的字符串。可能的值：
   
   visible : 頁面內容至少是部分可見。 在實際中，這意味着頁面是非最小化窗口的前景選項卡。
   hidden : 頁面內容對用戶不可見。 在實際中，這意味着文檔可以是一個后台標簽，或是最小化窗口的一部分，或是在操作系統鎖屏激活的狀態下。
   prerender : 頁面內容正在被預渲染且對用戶是不可見的(被document.hidden當做隱藏). 文檔可能初始狀態為prerender，但絕不會從其它值轉為該值。
   

   function handleVisibilityChange(){
     if(document.visibilityState=="hidden"){
       document.title="離開了";
     }
     if(document.visibilityState=="visible"){
       document.title="在這";
     }
   }
   document.addEventListener("visibilitychange", handleVisibilityChange, false);
   

---

• 下面是MDN的demo，離開界面，視頻暫停

  含有兼容代碼，值得一看

  // 設置隱藏屬性和改變可見屬性的事件的名稱
  var hidden, visibilityChange;
  if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
    hidden = "hidden";
    visibilityChange = "visibilitychange";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
  } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
  }
  
  var videoElement = document.getElementById("videoElement");
  
  // 如果頁面是隱藏狀態，則暫停視頻
  // 如果頁面是展示狀態，則播放視頻
  function handleVisibilityChange() {
    if (document[hidden]) {
      videoElement.pause();
    } else {
      videoElement.play();
    }
  }
  
  // 如果瀏覽器不支持addEventListener 或 Page Visibility API 給出警告
  if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
    console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
  } else {
    // 處理頁面可見屬性的改變
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
  
    // 當視頻暫停，設置title
    // This shows the paused
    videoElement.addEventListener("pause", function () {
      document.title = 'Paused';
    }, false);
  
    // 當視頻播放，設置title
    videoElement.addEventListener("play", function () {
      document.title = 'Playing';
    }, false);
    
  }