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

prtyaa 2023-12-26 18:36:51  49413

分类专栏：资讯

问题描述

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

效果图

需求

当离开或进入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/