问题形容
咱们先看上面这一张效果图：
效果图
需要
当来到或进入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...