当一个网页是可见或点击选中的状态时Page Visibility API可以让你获取到这种状态。在用户使用切换标签的方式来浏览网页时,非常合理的情况是任何在后台页面都不会展示给用户。 当用户最小化网页或者浏览到其他标签的网页时,API将发送一个关于当前页面的可见信息的事件visibilitychange。你可以检测该事件然后执行一些活动或是展示不同的效果。

目前主要有以下使用场景:

个人博客

小尾巴为例。

离开窗口时页面的title发生变化:

回到窗口时页面的title发生变化:

youtube

切换到别的窗口时停止播放,回到窗口继续播放。

轮播图

只有在用户观看轮播的时候,才会自动展示下一张幻灯片。

demo

思路:先把本来的然后监听事件 visibilitychange ,判断是离开页面还是回到页面,修改不同的 title 。需要注意的是,回到页面的时候,title 最终还是要变回初始的内容。

const originTitle = document.title

document.addEventListener('visibilitychange', () => {
    if(document.hidden) {
        document.title = "O_O以隐蔽"
    } else {
        document.title = "c.c以回到"
        setTimeout(()=> {
            document.title = originTitle
        },1000)
    }
})

参考阅读:Page Visibility API