document.visibilityState
2021-01-25 本文已影响0人
嘻哈章鱼小丸子
看文章的时候看到一个例子：
//判断当前选项卡是否在视图（焦点）中：document.hidden
const isBrowserTabInView = () => document.hidden;
isBrowserTabInView();
// Result: returns true or false depending on if tab is in view / focus
document.hidden？还有这种属性？赶紧补课 。
document.hidden
document.hidden
只读？在哪里赋值呢？搜索到了document.visibilityState属性。
继续看下面的例子，还有visibilitychange 可监听事件，这个事件里可以获取document.hidden和document.visibilityState的值。
document.visibilityState
visibilityState
visibilityState 共有3种状态，其中hidden和visible状态所有浏览器都支持，prerender则是可选状态，非必须。重点研究下hidden状态，分为四种情况：
- 文档处于背景标签页状态
- 窗口处于最小化状态
- 操作系统处于“锁屏状态”（windows锁屏也可）
- 页面将要卸载状态：包括
tab页切换、用户或系统关闭tab页或浏览器窗口。也就是说，页面卸载之前，document.visibilityState属性一定会变成hidden
document.hidden和document.visibilityState的关系
当document.visibilityState属性返回visible时，document.hidden属性返回false；其他情况下，都返回true。
onvisibilitychange
可以这样来获取当前页面的状态：
document.addEventListener("visibilitychange", function () {
// 用户离开了当前页面
if (document.visibilityState === "hidden") {
document.title = "页面不可见";
}
// 用户打开或回到页面
if (document.visibilityState === "visible") {
document.title = "页面可见";
}
});
总结
-
Page Visibility相关的API有
document.hidden，document.visibilityState和onvisibilitychange -
hidden的值取决于visibilityState - 页面状态可通过
visibilitychange获取hidden或visibilityState的值
