JavaScript?Page?Visibility?API檢測(cè)頁(yè)面是否可見方法詳解

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

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

??什么是 Page Visibility API？

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

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

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

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

1. 屬性

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

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

2. 方法

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

?? Page Visibility API 的使用場(chǎng)景

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

視頻播放器

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

實(shí)時(shí)消息通知

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

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

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

游戲應(yīng)用程序

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

網(wǎng)頁(yè)埋點(diǎn)統(tǒng)計(jì)分析

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

網(wǎng)頁(yè)性能測(cè)量

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

頁(yè)面緩存

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

當(dāng)然還有更多使用場(chǎng)景，本文不再過多介紹。

?? 如何使用 Page Visibility API？

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

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

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

Page Visibility API 的兼容性

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

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

詳細(xì)可以查看「Page Visibility API」。

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

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

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

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

點(diǎn)擊 demo 查看。

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

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

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

?? 總結(jié)

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