visibilitychange关于浏览器选项卡切换事件

visibilitychange 事件说明

visibilitychange 当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改)事件。

具体使用

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    //	浏览器选项卡可见
  } else {
    //	浏览器选项卡不可见
  }
  
  if (!document.hidden) {
    //	浏览器选项卡可见
  } else {
    //	浏览器选项卡不可见
  }
});

关于 visibilityState 说明

Document.visibilityState
（只读属性）, 返回document的可见性，典型用法是防止当页面正在渲染时加载资源, 或者当页面在背景中或窗口最小化时禁止某些活动。

visibilityState 可能的值

值	说明
visible	此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化
hidden	此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’
prerender	页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始，永远不能从其他值变为此状态.注意: 浏览器支持是可选的（兼容性很差）

也有使用 document.hidden 来判断的

Document.hidden（只读属性）返回布尔值，表示页面是（true）否（false）隐藏。