如何監聽頁面是否位於瀏覽器顯示標籤頁位置

如圖所示 , 當瀏覽器打開很多標籤頁時監聽是否爲選中 ;
當最小化瀏覽器是也會觸發該函數。
我們可以用這個方法控制頁面中運行的 js 在對應的狀態下停止或者開始運行 , 優化 js 並減少瀏覽器負擔

谷歌(Chrome)瀏覽器下測試如下 , 可以正常運行 :

Safari 瀏覽器下測試如下 , 可以正常運行 :

火狐瀏覽器下測試如下 , 可以正常運行 :

代碼如下 :

  var hiddenProperty = 'hidden' in document ? 'hidden' :
   'webkitHidden' in document ? 'webkitHidden' :
   'mozHidden' in document ? 'mozHidden' : null;
   var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
   var onVisibilityChange = function () {
       // 當可見性改變觸發函數
       if (!document[hiddenProperty]) {
           console.log("現在是主屏顯示");
           // 當頁面在瀏覽器可視標籤頁顯示時
       } else {
           console.log("離開標籤頁");
           // 當頁面隱藏時
       }
   }
   document.addEventListener(visibilityChangeEvent, onVisibilityChange);