乐趣区

关于javascript:visibilitychange搭配documenthidden实现有意思的tab页离开进入效果

jiezi

问题形容

咱们先看上面这一张效果图：

效果图

需要

当来到或进入 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…
退出移动版