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

Kosmos 發布于2019-08-23 14:45 / 953人閱讀

摘要：歡迎訪問我的個人博客前言在工作中我們可能會遇到這樣的需求，當瀏覽器切換到別的標簽頁或著最小化時，我們需要暫停頁面上正在播放的視頻或者音樂，這個需求就會用到我下面要說的這個知識點具體用法瀏覽器標簽頁隱藏或者顯示時會改變和的值，我們可以通過這個

歡迎訪問我的個人博客：http://www.xiaolongwu.cn

前言

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

document.visibilityState

document.hidden

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

GPU云服務器云服務器 js判斷后臺數據顯示隱藏 js 如何隱藏標簽 js顯示隱藏 js 設置隱藏顯示

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101078.html

vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

wqj97 2019-08-21 17:38 評論0 收藏0
vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

FingerLiu 2019-08-01 18:01 評論0 收藏0
vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

MadPecker 2019-08-29 13:49 評論0 收藏0
Node - 內存管理和垃圾回收

摘要：的內存限制和垃圾回收機制內存限制內存限制一般的后端語言開發中，在基本的內存使用是沒有限制的。的內存分代目前沒有一種垃圾自動回收算法適用于所有場景，所以的內部采用的其實是兩種垃圾回收算法。前言從前端思維轉變到后端，有一個很重要的點就是內存管理。以前寫前端因為只是在瀏覽器上運行，所以對于內存管理一般不怎么需要上心，但是在服務器端，則需要斤斤計較內存。 V8的內存限制和垃圾回收機...

joyqi 2019-08-23 17:17 評論0 收藏0
Django 學習小組：博客開發實戰第三周教程——文章列表分頁和代碼語法高亮

摘要：本教程內容已過時，更新版教程請訪問博客開發入門教程。當分頁較多時，總是顯示當前頁及其前幾頁和后幾頁的頁碼教程中使用的是兩頁，其他頁碼用省略號代替。本教程內容已過時，更新版教程請訪問： django 博客開發入門教程。摘要：前兩期教程我們實現了博客的 Model 部分，以及 Blog 的首頁視圖 IndexView，詳情頁面 DetailView，以及分類頁面 CategoryVi...

Luosunce 2019-07-25 10:28 評論0 收藏0