js基礎–如何判斷瀏覽器標籤頁是隱藏或者顯示狀態

歡迎訪問我的個人部落格：http://www.xiaolongwu.cn

前言

在工作中我們可能會遇到這樣的需求，當瀏覽器切換到別的標籤頁或著最小化時，我們需要暫停頁面上正在播放的視訊或者音樂，這個需求就會用到我下面要說的這個知識點：

1. document.visibilityState
2. document.hidden
3. visibilitychange

具體用法

瀏覽器標籤頁隱藏或者顯示時會改變document.visibilityState和document.hidden的值，我們可以通過visibilitychange這個事件去監聽他們狀態值的變化；

// 我在這裡建議大家親自試試以下程式碼
document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
  console.log(document.hidden);
});

上面程式碼中：

• document.visibilityState有兩個值，分別為hidden和visible,hidden表示標籤頁被隱藏了，visible則反之；
• document.hidden也有兩個值，分別為true和false，true表示標籤頁被隱藏了，false則反之；

我的github資源地址：js基礎–如何判斷瀏覽器標籤頁是隱藏或者顯示狀態

我的CSDN部落格地址：https://blog.csdn.net/wxl1555

如果您對我的部落格內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：wuxiaolong802@163.com