浏览器tab页隐藏/显示的判断和处理

# 场景

业务中，有些场景下需要知道当前页面(浏览器tab)是否是处于激活(显示)状态，来做对应的处理。

# API

MDN: visibilitychange

# 使用

查看效果

let _title;

//浏览器切换事件
document.addEventListener('visibilitychange', function() {
  //状态判断
  if(document.visibilityState == 'hidden') {
    // 缓存原来的标题
    _title = document.title;
    document.title = '页面被隐藏后的标题';
    // 隐藏状态
    // 你可以做其他操作
  } else {
    // 标题还原
    document.title = _title;
    // 显示状态
    // 你可以做其他操作
  }
});

js
copy success