写在前面

书中自有黄金屋，书中自有颜如玉！今天看书看到一个好玩的东西，随即想用博客记录一下，也想分享给更多的技术猿知道。那就是当我们切换浏览器的tab页的时候，可以对此行为进行监听，然后做一些自己想做的事情，比如改一改页面title了，或者别的一些操作。

JS监听浏览器tab页切换

浏览器标签页被隐藏或显示的时候会触发 visibilitychange 事件。直接上代码：

1
2
3
4
5
if (document.hidden !== undefined) {
  document.addEventListener('visibilitychange', () => {
    console.log(document.hidden)
  })
}

可以看到，当我们离开当前tab页的时候，控制台输出true，当我们进入当前tab页的时候，控制台输出false。

那我们利用这一特性来做一个简单的小案例，我们在用户由当前tab页切换到其他tab页的时候，我们修改当前tab页面的标题用来提醒用户快回来当前tab页，当用户再次回来的时候，我们再把页面title正常显示为原来的页面标题，show code：

1
2
3
4
5
6
7
8
9
10
const TITLE = document.title
if (document.hidden !== undefined) {
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      console.log(777)
      return document.title = "看啥呢,快回来啊~~"
    }
    document.title = TITLE
  })
}