问题描述
我们先看下面这一张效果图：
效果图
需求
当离开或进入tab标签页时，动态更改tab的title内容显示
解决方案
其实很简单，只是一时间我们可能想不到，不过Web的发明设计者们，早就想到了，并提供了相关的api
监听visibilitychange事件搭配document.hidden属性值
visibilitychange
visibilitychange是一个事件名- 此事件的触发取决于选项卡的内容可见或被隐藏时
- 可以使用
document去监听这个事件的变化，从而做一些逻辑的操作
document.hidden
- 表示页面是（true）否（false）隐藏
- 可以理解为进入tab标签页和离开tab标签页
另有document.visibilityState为visible或hidden（常用），一个意思
知道这两个api，那相关的需求，就能解决啦
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="http://ashuai.work/static/img/avantar.png">
<title>😄欢迎欢迎😄</title>
</head>
<body>
<script>
/**
* 标签页标题切换
* */
// 监听visibilitychange事件
document.addEventListener("visibilitychange", function () {
console.log('document.visibilityState', document.visibilityState);
// 若是离开此tab标签页
if (document.hidden) {
document.title = "😭你快回来😭"
}
// 若是进入此tab标签页
else {
document.title = "😄欢迎欢迎😄"
}
});
</script>
</body>
</html>延伸使用场景
实际上，在工作中，页面离开或隐藏触发相应的逻辑，还是有一些场景的。如下：
- 在当前页播放音乐，离开当前页暂停音乐
- 在线做面试题时，看看求职者有没有离开当前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...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。