当前页面是否可见

判断当前页面是否可见。

使用Document.hidden属性判断当前页面是否可见。

const isBrowserTabFocused = () => !document.hidden;

例子

// true
isBrowserTabFocused(); 

扩展阅读

Document.hidden属性来自于浏览器Page Visibility API。

该API的设计目的是为了方便开发者监听页面的可见性的变化，包括如下组成部分：

Document.hidden

为一个只读布尔值，表示当前页面是否被可见。

document.visibilityState

为一个只读字符串，表示页面当前的可见性状态，共有三个可选值：

• hidden：页面不可见
• visible：页面部分可见
• prerender：页面即将或正在渲染，处于不可见状态

当满足如下条件之一，为hidden：

• 浏览器窗口最小化
• 当前浏览器Tab未处于激活状态
• 浏览器将要卸载（unload）页面
• 移动端设备触发触发锁屏

除此之外，页面露出任何部分都属于visible。

prerender存在于支持预渲染的浏览器。可以在用户不可见的状态下，预先把页面渲染出来，等到用户要浏览的时候，直接展示渲染好的网页。

visibilitychange事件

当document.visibilityState属性发生变化会触发visibilitychange事件。

document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'hidden') {
    console.log('当前页面不可见');
  }

  if (document.visibilityState === 'visible') {
    console.log('当前页面可见');
  }
});