快捷導航

JavaScript?Page?Visibility?API檢測頁面是否可見方法詳解

更新時間：2023年05月29日 14:46:51 作者：pingan8787

這篇文章主要為大家介紹了JavaScript?Page?Visibility?API檢測頁面是否可見方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

??什么是 Page Visibility API？

在前端開發(fā)中，我們經(jīng)常需要根據(jù)頁面的可見性來控制資源的使用和提高頁面的性能和響應(yīng)速度。而 JavaScript 中的 Page Visibility API 就提供了一種檢測頁面是否可見的方法。

本文將介紹 Page Visibility API 的概念、使用方法、兼容性和實際應(yīng)用案例。

Page Visibility API 是一種瀏覽器 API，它提供了一種檢測頁面是否可見的方法。通過 Page Visibility API，我們可以知道當前頁面是否被隱藏或者最小化，從而可以根據(jù)頁面的可見性來控制頁面的行為和資源的使用。

Page Visibility API 提供了 2 個屬性和 1 個事件，分別是：

1. 屬性

document.hidden：只讀，表示當前頁面是否被隱藏，如果頁面被隱藏返回 true，否則返回 false。
document.visibilityState：只讀，表示當前頁面的可見性狀態(tài)，可能的取值有：

visible：當前頁面可見，即頁面是非最小化窗口的前景選項卡。
hidden：當前頁面被隱藏，即頁面可以是一個后臺標簽，或是最小化窗口的一部分，或是在操作系統(tǒng)鎖屏激活的狀態(tài)下。
prerender：當前頁面正在預加載。
unloaded：當前頁面正在卸載，部分瀏覽器不支持。

2. 方法

visibilitychange：當頁面的可見性狀態(tài)發(fā)生變化時觸發(fā)該事件。

?? Page Visibility API 的使用場景

Page Visibility API 可以應(yīng)用于很多場景，比如：

視頻播放器

在視頻播放期間，可以使用 Page Visibility API 來檢測頁面是否可見。如果頁面不可見，可以通過暫停視頻來節(jié)省資源和帶寬。當頁面重新變?yōu)榭梢姇r，可以恢復播放。

實時消息通知

如果我們網(wǎng)頁需要向用戶發(fā)送實時通知，就可以使用 Page Visibility API 來檢測頁面是否可見，如果頁面不可見，就不會發(fā)送通知。當用戶重新打開頁面時，我們可以再次檢查，并確保他們看到任何未讀消息。

自動保存表單數(shù)據(jù)

如果用戶在表單上輸入了大量數(shù)據(jù)，而且在填寫過程中離開了頁面，我們可以使用 Page Visibility API 確定何時離開頁面，并自動保存表單數(shù)據(jù)，以便以后再次訪問。

游戲應(yīng)用程序

如果我們正在開發(fā)一個基于 Web 的游戲，就可以使用 Page Visibility API 暫停和恢復游戲，以便玩家能夠在離開游戲時不會丟失任何進度。

網(wǎng)頁埋點統(tǒng)計分析

使用 Page Visibility API 可以收集更準確的訪問次數(shù)，以便更好地分析用戶行為。

網(wǎng)頁性能測量

使用 Page Visibility API 可以測量頁面加載時間和頁面卸載時間，幫助您優(yōu)化網(wǎng)站性能。

頁面緩存

如果使用 Page Visibility API 的網(wǎng)站被用戶退出，那么通過記錄緩存狀態(tài)，可以更好地管理頁面的緩存，以便下次更快的訪問。

當然還有更多使用場景，本文不再過多介紹。

?? 如何使用 Page Visibility API？

使用 Page Visibility API 非常簡單，只需要在 JavaScript 中監(jiān)聽 visibilitychange 事件即可。以下是一個簡單的示例：

document.addEventListener("visibilitychange", function () {
  if (document.hidden) {
    // 頁面被隱藏
  } else {
    // 頁面可見
  }
});

在以上示例中，我們使用了 visibilitychange 事件來監(jiān)聽頁面的可見性狀態(tài)變化，當頁面被隱藏時，我們可以執(zhí)行一些操作，當頁面重新可見時，我們也可以執(zhí)行一些操作。

Page Visibility API 的兼容性

Page Visibility API 并不是所有瀏覽器都支持，我們需要在使用之前檢查瀏覽器是否支持該 API。以下是一些瀏覽器的支持情況：

Chrome：支持。
Firefox：支持。
Safari：支持。
IE：支持 IE10+。
Edge：支持。

詳細可以查看「Page Visibility API」。

如果需要兼容不支持 Page Visibility API 的瀏覽器，我們可以使用 Polyfill 或者其他的檢測方法來實現(xiàn)。

?? Page Visibility API 的實際應(yīng)用案例

以下是一些 Page Visibility API 的實際應(yīng)用案例：

1. 根據(jù)頁面的可見性來控制視頻播放

點擊 demo 查看。

2. 根據(jù)頁面的可見性來控制動畫執(zhí)行

在頁面中創(chuàng)建小球，其位置隨著時間的推移而變化。使用 Page Visibility API，可以在頁面不可見時停止動畫，并在頁面重新變?yōu)榭梢姇r恢復動畫。

<!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() 是一個循環(huán)函數(shù)，它可以連續(xù)執(zhí)行函數(shù)的代碼，實現(xiàn)動畫效果。在本例中，move() 函數(shù)不斷修改球的位置（通過修改 CSS 中的 top 和 left 屬性），并在達到屏幕邊緣時將其反轉(zhuǎn)。頁面可見性通過 visibilitychange 事件進行監(jiān)測，當頁面從可見到不可見時停止動畫，反之則恢復動畫。

?? 總結(jié)

通過本文的介紹，我們了解了 Page Visibility API 的概念、使用方法、兼容性和實際應(yīng)用案例。在實際開發(fā)中，我們可以根據(jù)頁面的可見性來控制資源的使用，提高用戶體驗和性能優(yōu)化。如果你想深入了解 Page Visibility API，可以參考以下文檔：