document.visibilityState

看文章的时候看到一个例子：

//判断当前选项卡是否在视图（焦点）中：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的值

参考文章：
[Page Visibility API 教程]
[Page Lifecycle API 教程]