JS 監聽瀏覽器標簽頁顯示隱藏

JS 監聽瀏覽器標簽頁顯示隱藏

API

• document.hidden
  判斷頁面是否隱藏的布爾值。頁面隱藏包括 頁面在后台標簽頁中 或者 瀏覽器最小化

• document.visibilityState
  （只讀屬性）, 返回document的可見性，4個值：

  • hidden：文檔處於背景標簽頁或者窗口處於最小化狀態，或者操作系統正處於 '鎖屏狀態'

  • visible：此頁面在前景標簽頁中，並且窗口沒有最小化

  • prerender：頁面在屏幕外執行預渲染處理 document.hidden 的值為 true

  • unloaded：頁面正在從內存中卸載

• visibilitychange事件
  當標簽頁從可見變為不可見或者從不可見變為可見時（包括標簽頁切換與瀏覽器最小化），會觸發該事件

document.addEventListener('visibilitychange', function() {
    var isHidden = document.hidden;
    console.log(document.visibilityState)
    if (isHidden) {
        document.title = '隱藏';
    } else {
        document.title = '顯示';
    }
});

瀏覽器兼容性

Chrome (Webkit)	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
33+(-webkit-)	56+(-moz-)	10+(-ms-)

適用場景

標簽頁隱藏的時候停止播放音樂視頻、停止一些不必要的輪詢