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.hiddendocument.visibilityState的值。

document.visibilityState

visibilityState

visibilityState 共有3种状态,其中hiddenvisible状态所有浏览器都支持,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.hiddendocument.visibilityStateonvisibilitychange
  • hidden的值取决于visibilityState
  • 页面状态可通过visibilitychange获取hiddenvisibilityState的值

参考文章:
Page Visibility API 教程
Page Lifecycle API 教程

推荐阅读更多精彩内容

  • 篇幅可能有点长,我想先聊一聊阅读的方式,我希望你阅读的时候,能够把我当作你的竞争对手,你的梦想是超越我。你想超越我...
    __越过山丘__阅读 78评论 0 0
  • html5有哪些新特性,移除了那些元素? 新特性: 语义化更好的内容标签(header,nav,footer,as...
    毕子歌阅读 55评论 0 0
  • HTML+CSS Label的作用是什么?是怎么用的 答案: label标签来定义表单控制间的关系当用户选择该标签...
    Daeeman阅读 95评论 0 0
  • 作者:今日头条技术链接:https://techblog.toutiao.com/2018/06/05/ru-he...
    码农小光阅读 421评论 0 7
  • 个人博客:https://yeaseonzhang.github.io 花了半个多月的时间,终于又把“JS红宝书”...
    Yeaseon阅读 995评论 2 22