Skip to content

页面可见性

经典真题

  • 页面可见性（Page Visibility）API 可以有哪些用途？

页面可见性介绍

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

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

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

常用的 API 如下：

  • document.hidden：这个新出现的 document.hidden 属性，它显示页面是否为用户当前观看的页面，值为 ture 或 false。

  • document.visibilityState：visibilityState 的值要么是 visible ，表明页面为浏览器当前激活 tab，而且窗口不是最小化状态；要么是 hidden ，表示页面不是当前激活 tab 页面，或者窗口最小化了；或者 prerender ，表示页面在重新生成，对用户不可见。

  • visibilitychange 事件：监听页面可见性变化事件

下面是一个页面可见性的具体示例：

<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 可以有哪些用途？

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

常用的 API 有三个，document.hidden 返回一个布尔值，如果是 true，表示当前页面隐藏，false 则表示页面可见。不同页面之间来回切换，会触发 visibilitychange 事件，还有一个 document.visibilityState，表示页面所处的状态。

常见的用途：

  • 网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片。
  • 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
  • 页面想要检测是否正在渲染，以便可以准确的计算网页浏览量
  • 当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）

-EOF-