JavaScript Page Visibility API 检测页面可见性详解

什么是 Page Visibility API？

在前端开发中，我们常需依据页面可见状态来管理资源消耗，进而提升页面性能与响应效率。JavaScript 提供的 Page Visibility API 正是用于检测页面可见性的工具。

下文将阐述该 API 的核心概念、具体用法、浏览器兼容性以及实际应用场景。

Page Visibility API 是浏览器内置接口，用于判断当前页面是否处于可见状态。利用该 API，开发者可以获知页面是否被隐藏或最小化，从而据此调整页面行为及资源分配策略。

该 API 包含 2 个属性与 1 个事件，具体如下：

1. 属性

• document.hidden：只读属性，指示页面是否被隐藏。若页面隐藏则返回 true，否则返回 false。
• document.visibilityState：只读属性，表示页面的可见性状态，其可能取值包括：

• visible：表示页面可见，即当前窗口为非最小化状态的前台标签页。
• hidden：表示页面被隐藏，此时页面可能处于后台标签页、被最小化，或操作系统处于锁屏激活状态。
• prerender：表示页面正处于预加载状态。
• unloaded：表示页面正在卸载，部分浏览器可能不支持此状态。

2. 事件

• visibilitychange：当页面可见性状态发生改变时触发此事件。

Page Visibility API 的使用场景

该 API 适用于多种场景，例如：

• 视频播放器

在视频播放过程中，可利用 Page Visibility API 检测页面可见性。若页面不可见，可暂停视频以节省带宽与系统资源；当页面重新变为可见时，再恢复播放。

• 实时消息通知

若网页需向用户推送实时通知，可通过 Page Visibility API 检测页面状态。当页面不可见时不发送通知；当用户重新打开页面时，再次检查并确保用户能查看未读消息。

• 自动保存表单数据

若用户在表单中输入大量数据后离开页面，可利用 Page Visibility API 捕捉离开时刻，自动保存表单数据，以便用户下次访问时继续填写。

• 游戏应用程序

开发基于 Web 的游戏时，可使用 Page Visibility API 暂停和恢复游戏，确保玩家离开游戏时进度不丢失。

• 网页埋点统计分析

利用 Page Visibility API 可收集更准确的访问次数，从而更精准地分析用户行为。

• 网页性能测量

通过 Page Visibility API 可测量页面加载时间与卸载时间，有助于优化网站性能。

• 页面缓存

若使用 Page Visibility API 的网站被用户退出，通过记录缓存状态，可更好地管理页面缓存，实现下次访问时的快速加载。

此外还有更多应用场景，此处不再赘述。

如何使用 Page Visibility API？

使用 Page Visibility API 十分简便，只需在 JavaScript 中监听 visibilitychange 事件即可。以下是一个简单示例：

document.addEventListener("visibilitychange", function () {
  if (document.hidden) {
    // 页面被隐藏
  } else {
    // 页面可见
  }
});

在上述示例中，我们利用 visibilitychange 事件监听页面可见性状态的变化。当页面被隐藏时，可执行特定操作；当页面重新变为可见时，也可执行相应操作。

Page Visibility API 的兼容性

并非所有浏览器都支持 Page Visibility API，使用前需检查浏览器兼容性。各浏览器支持情况如下：

• Chrome：支持。
• Firefox：支持。
• Safari：支持。
• IE：支持 IE10 及以上版本。
• Edge：支持。

详细信息可查阅「Page Visibility API」相关文档。

如需兼容不支持该 API 的浏览器，可使用 Polyfill 或其他检测方法实现。

Page Visibility API 的实际应用案例

以下是 Page Visibility API 的一些实际应用案例：

1. 根据页面可见性控制视频播放

点击 demo 查看。

2. 根据页面可见性控制动画执行

在页面中创建小球，其位置随时间变化。利用 Page Visibility API，可在页面不可见时停止动画，页面重新可见时恢复动画。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Animation Control Using Page Visibility API</title>
    <style>
      #ball {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div id="ball"></div>
    <script>
      window.addEventListener("DOMContentLoaded", function () {
        var ball = document.getElementById("ball");
        ball.style.top = 0;
        ball.style.left = 0;
        var speedX = 2;
        var speedY = 3;
        function move() {
          var top = parseFloat(ball.style.top);
          var left = parseFloat(ball.style.left);
          // 确保小球不会移出屏幕
          if (top < 0 || top > window.innerHeight - 50) {
            speedY = -speedY;
          }
          if (left < 0 || left > window.innerWidth - 50) {
            speedX = -speedX;
          }
          ball.style.top = top + speedY + "px";
          ball.style.left = left + speedX + "px";
        }
        var timer = setInterval(function () {
          move();
        }, 10);
        document.addEventListener("visibilitychange", function () {
          if (document.visibilityState === "hidden") {
            clearInterval(timer);
          } else {
            timer = setInterval(function () {
              move();
            }, 10);
          }
        });
      });
    </script>
  </body>
</html>

其中 setInterval() 是一个循环函数，可连续执行代码以实现动画效果。本例中，move() 函数不断修改球的位置（通过调整 CSS 中的 top 和 left 属性），并在到达屏幕边缘时反转方向。页面可见性通过 visibilitychange 事件监测，当页面从可见转为不可见时停止动画，反之则恢复。

总结

通过本文介绍，我们了解了 Page Visibility API 的概念、用法、兼容性及应用案例。在实际开发中，可根据页面可见性控制资源使用，提升用户体验与性能。若想深入了解 Page Visibility API，可参考以下文档：

• MDN 文档
• W3C 规范

以上就是 JavaScript Page Visibility API 检测页面是否可见方法详解的详细内容，更多关于 JS 检测页面是否可见的资料请关注本站其它相关文章！