HTML中的页面可见性

菜鸟_小卡酷谋2024-04-27 14:21

页面可见性介绍

长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法。

用户是否去看别的网站了？他们切换回来了么？

HTML5 里页面可见性接口就提供给了程序员一个方法，让他们使用 visibilitychange 页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。同时还有新的 document.hidden 属性可以使用。

常用的 API 如下：

document.hidden ：这个新出现的 document.hidden 属性，它显示页面是否为用户当前观看的页面，值为 ture 或 false。
document.visibilityState ：visibilityState 的值要么是 visible ，表明页面为浏览器当前激活 tab ，而且窗口不是最小化状态；要么是 hidden ，表示页面不是当前激活 tab 页面，或者窗口最小化了；或者 prerender ，表示页面在重新生成，对用户不可见。
visibilitychange 事件：监听页面可见性变化事件。

示例：

html 复制代码

<body>
    <p>页面可见性示例</p>
    <script>
        document.addEventListener("visibilitychange", function () {
            if(document.visibilityState === "hidden"){
                document.title = "页面切换了~目前不可见"
            }
            if(document.visibilityState === "visible"){
                document.title = "页面可见性示例"
            }
        });
    </script>
</body>

更多有关页面可见性的内容可以参阅 MDN ：https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API

所以，所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性（Page Visibility）API 来判断当前页面是显示状态还是隐藏状态。