浏览器冷知识---前端-- 离开或进入浏览器页面的事件监听 visibilitychange

jiami

使用场景：
1.轮播图 只有在用户观看轮播图的时候才开启定时器 切换页面关掉定时器
2.当用户最小化窗口或切换到另一个选项卡时，页面播放中的视频暂停，用户在此期间不会错过任何视频。这种体验是用户无感知的，并且对于用户体验是非常友好的。
3.当用户最小化窗口或切换到另一个选项卡时，API会发送visibilitychange事件，让监听者知道页面状态已更改。你可以检测事件并执行某些操作或行为不同。例如，如果您的网络应用正在播放视频，则可以在用户将标签放入背景时暂停视频，并在用户返回标签时恢复播放。 用户不会在视频中丢失位置，视频的音轨不会干扰新前景选项卡中的音频，并且用户在此期间不会错过任何视频

window.addEventListener('visibilitychange',hanldeVisiblityChange);
function hanldeVisiblityChange() {
if (document.visibilityState === 'hidden') {
console.log('同一个项目，浏览器打开多标签时，被隐藏的那个页签')
}
if (document.visibilityState === 'visible') {
console.log('同一个项目，浏览器打开多标签时，被打开的那个页签')
}
}

一大杯奶茶呀

收藏一下 后续用到再试