看文章的時(shí)候看到一個(gè)例子：
//判斷當(dāng)前選項(xiàng)卡是否在視圖（焦點(diǎn)）中：document.hidden
const isBrowserTabInView = () => document.hidden;
isBrowserTabInView();
// Result: returns true or false depending on if tab is in view / focus
document.hidden？還有這種屬性烟馅？趕緊補(bǔ)課 。
document.hidden
document.hidden
只讀然磷？在哪里賦值呢郑趁？搜索到了document.visibilityState屬性。
繼續(xù)看下面的例子姿搜，還有visibilitychange 可監(jiān)聽事件寡润，這個(gè)事件里可以獲取document.hidden和document.visibilityState的值。
document.visibilityState
visibilityState
visibilityState 共有3種狀態(tài)痪欲，其中hidden和visible狀態(tài)所有瀏覽器都支持悦穿，prerender則是可選狀態(tài)，非必須业踢。重點(diǎn)研究下hidden狀態(tài)栗柒，分為四種情況：
- 文檔處于背景標(biāo)簽頁(yè)狀態(tài)
- 窗口處于最小化狀態(tài)
- 操作系統(tǒng)處于“鎖屏狀態(tài)”（windows鎖屏也可）
- 頁(yè)面將要卸載狀態(tài)：包括
tab頁(yè)切換、用戶或系統(tǒng)關(guān)閉tab頁(yè)或?yàn)g覽器窗口。也就是說瞬沦，頁(yè)面卸載之前太伊，document.visibilityState屬性一定會(huì)變成hidden
document.hidden和document.visibilityState的關(guān)系
當(dāng)document.visibilityState屬性返回visible時(shí)，document.hidden屬性返回false逛钻；其他情況下僚焦，都返回true。
onvisibilitychange
可以這樣來(lái)獲取當(dāng)前頁(yè)面的狀態(tài)：
document.addEventListener("visibilitychange", function () {
// 用戶離開了當(dāng)前頁(yè)面
if (document.visibilityState === "hidden") {
document.title = "頁(yè)面不可見";
}
// 用戶打開或回到頁(yè)面
if (document.visibilityState === "visible") {
document.title = "頁(yè)面可見";
}
});
總結(jié)
-
Page Visibility相關(guān)的API有
document.hidden曙痘，document.visibilityState和onvisibilitychange -
hidden的值取決于visibilityState - 頁(yè)面狀態(tài)可通過
visibilitychange獲取hidden或visibilityState的值
