js基礎(chǔ)--如何判斷瀏覽器標(biāo)簽頁(yè)是隱藏或者顯示狀態(tài)

Kosmos 發(fā)布于2019-08-23 14:45 / 966人閱讀

摘要：歡迎訪問(wèn)我的個(gè)人博客前言在工作中我們可能會(huì)遇到這樣的需求，當(dāng)瀏覽器切換到別的標(biāo)簽頁(yè)或著最小化時(shí)，我們需要暫停頁(yè)面上正在播放的視頻或者音樂(lè)，這個(gè)需求就會(huì)用到我下面要說(shuō)的這個(gè)知識(shí)點(diǎn)具體用法瀏覽器標(biāo)簽頁(yè)隱藏或者顯示時(shí)會(huì)改變和的值，我們可以通過(guò)這個(gè)

歡迎訪問(wèn)我的個(gè)人博客：http://www.xiaolongwu.cn

前言

在工作中我們可能會(huì)遇到這樣的需求，當(dāng)瀏覽器切換到別的標(biāo)簽頁(yè)或著最小化時(shí)，我們需要暫停頁(yè)面上正在播放的視頻或者音樂(lè)，這個(gè)需求就會(huì)用到我下面要說(shuō)的這個(gè)知識(shí)點(diǎn)：

document.visibilityState

document.hidden

visibilitychange

具體用法

瀏覽器標(biāo)簽頁(yè)隱藏或者顯示時(shí)會(huì)改變document.visibilityState和document.hidden的值，我們可以通過(guò)visibilitychange這個(gè)事件去監(jiān)聽(tīng)他們狀態(tài)值的變化；

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

上面代碼中：

document.visibilityState有兩個(gè)值，分別為hidden和visible,hidden表示標(biāo)簽頁(yè)被隱藏了，visible則反之；

document.hidden也有兩個(gè)值，分別為true和false，true表示標(biāo)簽頁(yè)被隱藏了，false則反之；

我的github資源地址：js基礎(chǔ)--如何判斷瀏覽器標(biāo)簽頁(yè)是隱藏或者顯示狀態(tài)

我的CSDN博客地址：https://blog.csdn.net/wxl1555

如果您對(duì)我的博客內(nèi)容有疑惑或質(zhì)疑的地方，請(qǐng)?jiān)谙路皆u(píng)論區(qū)留言，或郵件給我，共同學(xué)習(xí)進(jìn)步。

郵箱：[email protected]

云服務(wù)器 GPU云服務(wù)器 js判斷后臺(tái)數(shù)據(jù)顯示隱藏 js 如何隱藏標(biāo)簽 js顯示隱藏 js 設(shè)置隱藏顯示

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101078.html

相關(guān)文章

vue.js 移動(dòng)端音樂(lè)app（一） 基礎(chǔ)組件 scroll

一、基礎(chǔ)實(shí)現(xiàn) （1）功能對(duì) better-scroll 插件的基本封裝，實(shí)現(xiàn)移動(dòng)端的滾動(dòng) （2）實(shí)現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項(xiàng)之一（1）取值： 1 滾動(dòng)的時(shí)候會(huì)派發(fā) scroll 事件，會(huì)截流。 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā) scroll 事件，不會(huì)截流。 3 除了實(shí)時(shí)派發(fā) scroll 事件，在 swipe 的情況...

wqj97 2019-08-21 17:38 評(píng)論0 收藏0
vue.js 移動(dòng)端音樂(lè)app（一） 基礎(chǔ)組件 scroll

一、基礎(chǔ)實(shí)現(xiàn) （1）功能對(duì) better-scroll 插件的基本封裝，實(shí)現(xiàn)移動(dòng)端的滾動(dòng) （2）實(shí)現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項(xiàng)之一（1）取值： 1 滾動(dòng)的時(shí)候會(huì)派發(fā) scroll 事件，會(huì)截流。 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā) scroll 事件，不會(huì)截流。 3 除了實(shí)時(shí)派發(fā) scroll 事件，在 swipe 的情況...

FingerLiu 2019-08-01 18:01 評(píng)論0 收藏0
vue.js 移動(dòng)端音樂(lè)app（一） 基礎(chǔ)組件 scroll

一、基礎(chǔ)實(shí)現(xiàn) （1）功能對(duì) better-scroll 插件的基本封裝，實(shí)現(xiàn)移動(dòng)端的滾動(dòng) （2）實(shí)現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項(xiàng)之一（1）取值： 1 滾動(dòng)的時(shí)候會(huì)派發(fā) scroll 事件，會(huì)截流。 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā) scroll 事件，不會(huì)截流。 3 除了實(shí)時(shí)派發(fā) scroll 事件，在 swipe 的情況...

MadPecker 2019-08-29 13:49 評(píng)論0 收藏0
Node - 內(nèi)存管理和垃圾回收

摘要：的內(nèi)存限制和垃圾回收機(jī)制內(nèi)存限制內(nèi)存限制一般的后端語(yǔ)言開(kāi)發(fā)中，在基本的內(nèi)存使用是沒(méi)有限制的。的內(nèi)存分代目前沒(méi)有一種垃圾自動(dòng)回收算法適用于所有場(chǎng)景，所以的內(nèi)部采用的其實(shí)是兩種垃圾回收算法。前言從前端思維轉(zhuǎn)變到后端，有一個(gè)很重要的點(diǎn)就是內(nèi)存管理。以前寫(xiě)前端因?yàn)橹皇窃跒g覽器上運(yùn)行，所以對(duì)于內(nèi)存管理一般不怎么需要上心，但是在服務(wù)器端，則需要斤斤計(jì)較內(nèi)存。 V8的內(nèi)存限制和垃圾回收機(jī)...

joyqi 2019-08-23 17:17 評(píng)論0 收藏0
Django 學(xué)習(xí)小組：博客開(kāi)發(fā)實(shí)戰(zhàn)第三周教程——文章列表分頁(yè)和代碼語(yǔ)法高亮

摘要：本教程內(nèi)容已過(guò)時(shí)，更新版教程請(qǐng)?jiān)L問(wèn)博客開(kāi)發(fā)入門(mén)教程。當(dāng)分頁(yè)較多時(shí)，總是顯示當(dāng)前頁(yè)及其前幾頁(yè)和后幾頁(yè)的頁(yè)碼教程中使用的是兩頁(yè)，其他頁(yè)碼用省略號(hào)代替。本教程內(nèi)容已過(guò)時(shí)，更新版教程請(qǐng)?jiān)L問(wèn)： django 博客開(kāi)發(fā)入門(mén)教程。摘要：前兩期教程我們實(shí)現(xiàn)了博客的 Model 部分，以及 Blog 的首頁(yè)視圖 IndexView，詳情頁(yè)面 DetailView，以及分類(lèi)頁(yè)面 CategoryVi...

Luosunce 2019-07-25 10:28 評(píng)論0 收藏0