admin 管理员组

文章数量: 1184232

我的最新博客地址：我的最新博客

写在前面

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

JS监听浏览器tab页切换

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

if (document.hidden !== undefined) {
  document.addEventListener('visibilitychange', () => {
    console.log(document.hidden)
  })
}

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

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

const TITLE = document.title
if (document.hidden !== undefined) {
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      console.log(777)
      return document.title = "看啥呢,快回来啊~~"
    }
    document.title = TITLE
  })
}

本文标签： 趣事 浏览器 JS tab

版权声明：本文标题：JS趣事：监听浏览器tab页切换 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1755023406a3061636.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。