我的最新博客地址：我的最新博客
写在前面
书中自有黄金屋，书中自有颜如玉！今天看书看到一个好玩的东西，随即想用博客记录一下，也想分享给更多的技术猿知道。那就是当我们切换浏览器的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
})
}发布者：admin，转转请注明出处：http://www.yc00.com/web/1755023402a5227703.html
评论列表（0条）