visibilitychange搭配document.hidden实现有意思的tab页离开进入效果

问题描述

我们先看下面这一张效果图：

效果图

需求

当离开或进入tab标签页时，动态更改tab的title内容显示

解决方案

其实很简单，只是一时间我们可能想不到，不过Web的发明设计者们，早就想到了，并提供了相关的api

监听visibilitychange事件搭配document.hidden属性值

visibilitychange

• visibilitychange是一个事件名
• 此事件的触发取决于选项卡的内容可见或被隐藏时
• 可以使用document去监听这个事件的变化，从而做一些逻辑的操作

document.hidden

• 表示页面是（true）否（false）隐藏
• 可以理解为进入tab标签页和离开tab标签页

另有document.visibilityState为visible或hidden（常用），一个意思

知道这两个api，那相关的需求，就能解决啦

代码

延伸使用场景

实际上，在工作中，页面离开或隐藏触发相应的逻辑，还是有一些场景的。如下：

• 在当前页播放音乐，离开当前页暂停音乐
• 在线做面试题时，看看求职者有没有离开当前tab页，去百度答案啥的
• 离开当前tab页，给页面加上密码，进入时需输入密码（隐私安全问题）
• 一些blog的title效果，比如笔者的这个blog：http://ashuai.work:8890/

官方api地址：

• visibilitychange：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/vis...
• document.hidden：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden
• visibilityState：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/vis...