文章詳情頁

開發(fā)效率翻倍的Web API使用技巧

瀏覽：171日期：2022-06-09 16:29:24

引言
Clipboard API（剪切板）
Fullscreen API（進(jìn)入/退出全屏）
Online State API（網(wǎng)絡(luò)狀態(tài)）
Page Visibility API（頁面顯示）
Screen Orientation API（頁面方向）
Battery API（電池信息）
Web Share API（分享）
ImageCapture API（圖片抓取）
Selection API（文本選區(qū)）
Performance API（性能檢測）
Geolocation API（獲取位置）
Broadcast Channel API（跨頁面通信）
Vibration API（設(shè)備振動）
Srceen Capture API（視頻截圖）
Intersection Observer API（元素監(jiān)聽）

引言

隨著瀏覽器的日益壯大，瀏覽器自帶的功能也隨著增多，在 Web 開發(fā)過程中，我們經(jīng)常會使用一些 Web API 增加我們的開發(fā)效率。

Clipboard API（剪切板）

剪切板 API 快速將內(nèi)容復(fù)制到剪切板上，下面是一鍵復(fù)制的方法：

const onClipText = (text) => {
    handleCopyValue(text)
.then(() => {
    alert("復(fù)制成功");
})
.catch(() => {
    alert("自動復(fù)制失敗，請手動復(fù)制");
});
};
const handleCopyValue = (text) => {
    //瀏覽器禁用了非安全域的 navigator.clipboard 對象
    //在線上環(huán)境會報(bào)錯(cuò) TypeError: Cannot read properties of undefined (reading "writeText")
    if (!navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
    } else {
// 判斷是否支持拷貝
if (!document.execCommand("copy")) return Promise.reject();
// 創(chuàng)建標(biāo)簽，并隱藏
const textArea = document.createElement("textarea");
textArea.style.position = "fixed";
textArea.style.top = textArea.style.left = "-100vh";
textArea.style.opacity = "0";
textArea.value = text;
document.body.appendChild(textArea);
// 聚焦、復(fù)制
textArea.focus();
textArea.select();
return new Promise((resolve, reject) => {
    // 不知為何，必須寫這個(gè)三目，不然copy不上
    document.execCommand("copy") ? resolve() : reject();
    textArea.remove();
});
    }
};

執(zhí)行onClipText方法，即可將想復(fù)制內(nèi)容，復(fù)制到用戶的剪切板上。

Fullscreen API（進(jìn)入/退出全屏）

Fullscreen API 用于在 Web 應(yīng)用程序中開啟全屏模式，使用它就可以在全屏模式下查看頁面/元素。在安卓手機(jī)中，它會溢出瀏覽器窗口和安卓頂部的狀態(tài)欄（顯示網(wǎng)絡(luò)狀態(tài)、電池狀態(tài)等的地方）。

下面是一個(gè) Fullscreen API 的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fullscreen API Example</title>
  </head>
  <body>
    <div id="booktext">
       <h1>正能量先鋒</h1>
<p>在今天這個(gè)快節(jié)奏、競爭激烈的時(shí)代里，我們時(shí)常會面臨一些挑戰(zhàn)和困難，有時(shí)甚至?xí)屛覀兏械浇^望和沮喪。但我們應(yīng)該時(shí)刻銘記，每一個(gè)困難背后都有無限的機(jī)會和可能。</p>
       <button onclick="toggleFullscreen()">進(jìn)入/退出沉浸式閱讀</button>
    </div>
    <script>
      var bookText = document.getElementById("booktext");
      function toggleFullscreen() {
if (document.fullscreenElement) {
  document.exitFullscreen();
} else {
  bookText.requestFullscreen().catch(err => {
    console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
  });
}
      }
    </script>
  </body>
</html>

上面的例子展示了如何通過 Fullscreen API 實(shí)現(xiàn)一個(gè)視頻全屏播放的功能。

在 HTML 中，我們定義了一個(gè)視頻播放器，使用 controls 屬性添加了播放器的控制欄。同時(shí)，我們也定義了一個(gè)按鈕，點(diǎn)擊該按鈕可以全屏播放視頻。

在 JavaScript 中，我們首先通過 getElementById 獲取到視頻容器，然后通過 querySelector 獲取到視頻元素本身。接著，定義了一個(gè) toggleFullscreen 函數(shù)來監(jiān)聽按鈕的點(diǎn)擊事件，并根據(jù)當(dāng)前全屏狀態(tài)調(diào)用 requestFullscreen 或 exitFullscreen 來切換全屏狀態(tài)。

需要注意的是，requestFullscreen 方法可能會被瀏覽器阻止，例如因?yàn)橛脩粑词跈?quán)。因此在實(shí)際使用中，我們需要使用 catch 方法來捕獲 requestFullscreen 方法的調(diào)用錯(cuò)誤信息。

Online State API（網(wǎng)絡(luò)狀態(tài)）

就是獲取當(dāng)前的網(wǎng)絡(luò)狀態(tài)，同時(shí)也有對應(yīng)的事件去響應(yīng)網(wǎng)絡(luò)狀態(tài)的變化。

window.addEventListener("online", onlineHandler); // 聯(lián)網(wǎng)時(shí)
window.addEventListener("offline", offlineHandler); // 斷網(wǎng)時(shí)

比如很常見的一個(gè)需求，斷網(wǎng)時(shí)提示，網(wǎng)絡(luò)恢復(fù)時(shí)刷新。

實(shí)現(xiàn)斷網(wǎng)重連：

const onlineHandler = () => {
    window.location.reload();
};
const offlineHandler = () => {
    alert("網(wǎng)絡(luò)異常，請檢查您的網(wǎng)絡(luò)");
};
window.addEventListener("online", onlineHandler);
window.addEventListener("offline", offlineHandler);

這樣就可以監(jiān)聽用戶的網(wǎng)絡(luò)狀態(tài)，如網(wǎng)絡(luò)鏈接、斷開時(shí)可以對用戶進(jìn)行提示以及做相應(yīng)的邏輯處理。

Page Visibility API（頁面顯示）

我們可以用document.visibitilityState來監(jiān)聽網(wǎng)頁可見度，是否卸載..

在手機(jī)和電腦上都會現(xiàn)這種情況，比如頁面中有一個(gè)視頻正在播放，然后在切換tab頁后給視頻暫停播放，或者有個(gè)定時(shí)器輪詢，在頁面不顯示的狀態(tài)下停止無意義的輪詢等等。

比如一個(gè)視頻的例子來展示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fullscreen API Example</title>
  </head>
  <body>
 <video id="vs" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" controls>
 </video>
<script>
const video = document.getElementById("vs")
window.addEventListener("visibilitychange",() => {
    // 通過這個(gè)方法來獲取當(dāng)前標(biāo)簽頁在瀏覽器中的激活狀態(tài)。
    switch(document.visibilityState){
case"prerender": // 網(wǎng)頁預(yù)渲染 但內(nèi)容不可見
case"hidden":    // 內(nèi)容不可見 處于后臺狀態(tài)，最小化，或者鎖屏狀態(tài)
video.puase()
case"visible":   // 內(nèi)容可見
video.play()
case"unloaded":  // 文檔被卸載
video.destory()
    }
});
</script>
</body>
</html>

這個(gè)API的用處就是用來響應(yīng)我們網(wǎng)頁的狀態(tài)，如果這個(gè)標(biāo)簽頁顯示則視頻就開始播放，隱藏就暫停，關(guān)閉就卸載。

Screen Orientation API（頁面方向）

我們可以通過以下代碼來演示如何使用Screen Orientation API來控制頁面的方向：

// 獲取屏幕方向?qū)ο?const orientation = screen.orientation;
// 監(jiān)聽屏幕方向變化事件
orientation.addEventListener("change", () => {
  console.log(`屏幕方向變?yōu)椋?{orientation.type}`);
});
// 鎖定屏幕方向?yàn)闄M屏
orientation.lock("landscape").then(() => {
  console.log("屏幕方向已鎖定為橫屏");
}).catch((err) => {
  console.log(`鎖定屏幕方向失敗：${err}`);
});
// 解鎖屏幕方向
orientation.unlock();

在這段代碼中，我們首先通過screen.orientation獲取了屏幕方向?qū)ο螅⑼ㄟ^addEventListener方法監(jiān)聽了屏幕方向變化事件。然后，我們使用lock方法將屏幕方向鎖定為橫屏，并在鎖定成功后打印了一條消息。最后，我們使用unlock方法解鎖了屏幕方向。

需要注意的是，lock方法可能會在某些設(shè)備上無法生效，因此我們需要在實(shí)際使用中進(jìn)行兼容性測試。

Battery API（電池信息）

以下是一個(gè)使用 Battery API 的簡單示例：

<!DOCTYPE html>
<html>
<head>
    <title>Web Battery API Example</title>
</head>
<body>
    <h1>Web Battery API Example</h1>
    <div id="battery-status">
<p>當(dāng)前電量: <span id="battery-level"></span></p>
<p>電池狀態(tài): <span id="battery-status"></span></p>
    </div>
    <script>
// 獲取電池信息
navigator.getBattery().then(function(battery) {
    // 更新電量信息
    updateBatteryStatus(battery);
    // 監(jiān)聽電池信息變化
    battery.addEventListener("levelchange", function() {
updateBatteryStatus(battery);
    });
    battery.addEventListener("chargingchange", function() {
updateBatteryStatus(battery);
    });
});
// 更新電量信息
function updateBatteryStatus(battery) {
    document.querySelector("#battery-level").textContent = battery.level * 100 + "%";
    document.querySelector("#battery-status").textContent = battery.charging ? "正在充電" : "未充電";
}
    </script>
</body>
</html>

這個(gè)例子展示了如何使用Web Battery API來獲取電池的狀態(tài)信息，并在頁面上顯示當(dāng)前電量和電池狀態(tài)。

在這個(gè)例子中，我們使用了navigator.getBattery()方法來獲取電池信息，并使用battery.addEventListener()方法來監(jiān)聽電池信息變化。最后，我們使用updateBatteryStatus()函數(shù)來更新電量信息并在頁面上顯示。

Web Share API（分享）

以下是一個(gè)簡單的Web Share API例子：

// 獲取分享按鈕元素
const shareButton = document.querySelector("#share-button");
// 添加點(diǎn)擊事件監(jiān)聽器
shareButton.addEventListener("click", async () => {
  try {
    // 檢查瀏覽器是否支持Web Share API
    if (navigator.share) {
      // 調(diào)用Web Share API分享
      await navigator.share({
title: "分享標(biāo)題",
text: "分享描述",
url: "分享鏈接"
      });
    } else {
      // 如果不支持，顯示提示信息
      alert("該瀏覽器不支持Web Share API");
    }
  } catch (error) {
    // 處理異常情況
    console.error("分享失敗:", error);
  }
});

這個(gè)例子假設(shè)頁面中有一個(gè)id為share-button的分享按鈕元素。當(dāng)用戶點(diǎn)擊該按鈕時(shí)，代碼會檢查瀏覽器是否支持Web Share API，如果支持則調(diào)用該API進(jìn)行分享，否則顯示一個(gè)提示信息。

在navigator.share方法中，我們可以傳遞一個(gè)包含title、text和url等屬性的對象，用于指定分享內(nèi)容的標(biāo)題、描述和鏈接。如果用戶選擇分享，系統(tǒng)會彈出一個(gè)分享對話框，讓用戶選擇分享方式（例如通過社交媒體、電子郵件等方式分享）。

如果用戶取消分享，則navigator.share方法會返回一個(gè)Promise對象，其狀態(tài)為rejected。我們可以通過捕獲該P(yáng)romise對象的異常來處理分享失敗的情況。

ImageCapture API（圖片抓取）

以下提供一個(gè)基本的Web ImageCapture API示例，如下所示：

HTML代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Web ImageCapture API Demo</title>
  </head>
  <body>
    <h1>Web ImageCapture API Demo</h1>
    <video id="video" width="640" height="480" autoplay></video>
    <br>
    <button id="capture-btn">Capture Image</button>
    <br>
    <canvas id="canvas" width="640" height="480"></canvas>
    <br>
    <img id="captured-img">
  </body>
</html>

JavaScript代碼：

// 獲取視頻和按鈕元素
const video = document.getElementById("video");
const captureBtn = document.getElementById("capture-btn");
// 獲取畫布和圖像元素
const canvas = document.getElementById("canvas");
const img = document.getElementById("captured-img");
// 獲取視頻流
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
    video.play();
  })
  .catch(error => {
    console.log(error);
  });
// 設(shè)置ImageCapture
let imageCapture;
const track = video.srcObject.getVideoTracks()[0];
imageCapture = new ImageCapture(track);
// 添加事件監(jiān)聽器
captureBtn.addEventListener("click", () => {
  // 拍照
  imageCapture.takePhoto()
    .then(blob => {
      // 將照片顯示在畫布上
      const url = URL.createObjectURL(blob);
      canvas.getContext("2d").drawImage(img, 0, 0);
      // 將照片顯示在圖像元素中
      img.src = url;
    })
    .catch(error => {
      console.log(error);
    });
});

這個(gè)示例將顯示一個(gè)視頻元素和一個(gè)“Capture Image”按鈕。當(dāng)用戶點(diǎn)擊按鈕時(shí)，它將使用ImageCapture API拍攝照片，并在畫布和圖像元素中顯示照片。

請注意，此示例僅適用于支持MediaStreamTrack和ImageCapture API的瀏覽器。

Selection API（文本選區(qū)）

下面是一個(gè)Web Selection API的例子，如下所示：

HTML代碼：

<!DOCTYPE html>
<html>
<head>
    <title>Web Selection API Example</title>
    <style>
.highlight {
    background-color: yellow;
}
    </style>
</head>
<body>
    <h1>Web Selection API Example</h1>
    <p>Select text in the paragraph below to see the API in action.</p>
    <p id="demo">The Web Selection API allows you to retrieve and manipulate text selections made by the user.</p>
</body>
</html>

JavaScript代碼（web-selection-api.js）：

// 獲取文本節(jié)點(diǎn)
const demoEl = document.getElementById("demo");
// 監(jiān)聽文本節(jié)點(diǎn)的選擇事件
demoEl.addEventListener("mouseup", handleSelection);
// 處理選擇事件
function handleSelection() {
    // 獲取用戶選擇的文本
    const selection = window.getSelection();
    const selectedText = selection.toString();
    // 如果選擇的文本不為空
    if (selectedText) {
// 創(chuàng)建一個(gè)新的高亮節(jié)點(diǎn)
const highlightEl = document.createElement("span");
highlightEl.classList.add("highlight");
// 將高亮節(jié)點(diǎn)插入到選擇范圍中
const range = selection.getRangeAt(0);
range.surroundContents(highlightEl);
// 取消選擇
selection.removeAllRanges();
    }
}

這個(gè)例子演示了如何使用Web Selection API來獲取用戶選擇的文本，并將其高亮顯示。

當(dāng)用戶在頁面上選擇文本時(shí)，會觸發(fā)mouseup事件，然后調(diào)用handleSelection函數(shù)來處理選擇事件。

在handleSelection函數(shù)中，我們首先使用window.getSelection()方法獲取用戶選擇的文本，然后檢查是否選擇了文本。

如果選擇了文本，我們創(chuàng)建一個(gè)新的span元素，并將其添加到選擇范圍中，然后使用removeAllRanges()方法取消選擇。最后，我們使用CSS樣式將高亮顯示的文本突出顯示。

Performance API（性能檢測）

以下是一個(gè)使用 Web Performance API 的例子：

// 測量頁面加載時(shí)間
const startTime = window.performance.now();
window.addEventListener("load", () =&gt; {
  const loadTime = window.performance.now() - startTime;
  console.log(`頁面加載時(shí)間為：${loadTime} 毫秒`);
});
// 測量網(wǎng)絡(luò)時(shí)間
const resourceUrl = "https://example.com/resource";
fetch(resourceUrl)
  .then(response =&gt; {
    const fetchTime = window.performance.now() - startTime;
    console.log(`請求時(shí)間為：${fetchTime} 毫秒`);
    // 獲取網(wǎng)絡(luò)時(shí)間信息
    const entry = performance.getEntriesByName(resourceUrl)[0];
    const start = entry.fetchStart;
    const end = entry.responseEnd;
    console.log(`DNS 查詢時(shí)間為：${entry.domainLookupEnd - entry.domainLookupStart} 毫秒`);
    console.log(`TCP 握手時(shí)間為：${entry.connectEnd - entry.connectStart} 毫秒`);
    console.log(`TLS 握手時(shí)間為：${entry.secureConnectionStart ? entry.connectEnd - entry.secureConnectionStart : "N/A"} 毫秒`);
    console.log(`請求時(shí)間為：${entry.responseStart - entry.requestStart} 毫秒`);
    console.log(`響應(yīng)時(shí)間為：${entry.responseEnd - entry.responseStart} 毫秒`);
    console.log(`傳輸大小為：${entry.transferSize} 字節(jié)`);
  });

在這個(gè)例子中，我們使用了 Web Performance API 提供的 performance 對象來測量頁面加載時(shí)間和使用 fetch() 方法獲取資源的網(wǎng)絡(luò)時(shí)間。我們還使用了 getEntriesByName() 方法來檢索資源的網(wǎng)絡(luò)時(shí)間信息。

Geolocation API（獲取位置）

以下是一個(gè)使用 Geolocation API 獲取用戶當(dāng)前位置信息的示例代碼：

// 檢查瀏覽器是否支持 Geolocation API
if ("geolocation" in navigator) {
  // 獲取用戶當(dāng)前位置信息
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      console.log(`您的緯度為：${latitude}，經(jīng)度為：${longitude}`);
    },
    (error) => {
      switch (error.code) {
case error.PERMISSION_DENIED:
  console.log("用戶拒絕了位置請求");
  break;
case error.POSITION_UNAVAILABLE:
  console.log("無法獲取位置信息");
  break;
case error.TIMEOUT:
  console.log("請求超時(shí)");
  break;
default:
  console.log("發(fā)生未知錯(cuò)誤");
      }
    }
  );
} else {
  console.log("您的瀏覽器不支持 Geolocation API");
}

在這個(gè)例子中，我們首先檢查瀏覽器是否支持 Geolocation API。

如果支持，則調(diào)用 navigator.geolocation.getCurrentPosition() 方法獲取用戶當(dāng)前位置信息。該方法接受兩個(gè)回調(diào)函數(shù)作為參數(shù)：一個(gè)成功的回調(diào)函數(shù)和一個(gè)失敗的回調(diào)函數(shù)。

如果獲取位置信息成功，則成功的回調(diào)函數(shù)將被調(diào)用，并傳遞包含位置信息的對象作為參數(shù)。否則將調(diào)用失敗的回調(diào)函數(shù)，并傳遞一個(gè)描述錯(cuò)誤的對象作為參數(shù)。

Broadcast Channel API（跨頁面通信）

下面是一個(gè)使用 Broadcast Channel API 實(shí)現(xiàn)簡單的跨窗口通信的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Broadcast Channel API Example</title>
  </head>
  <body>
    <div id="message"></div>
    <input type="text" id="input-message">
    <button onclick="sendMessage()">Send Message</button>
    <script>
      const channel = new BroadcastChannel("my-channel"); // 創(chuàng)建一個(gè)廣播通道對象
      function sendMessage() {
const inputMessage = document.getElementById("input-message");
const message = inputMessage.value;
channel.postMessage(message); // 將消息發(fā)送到廣播通道中
inputMessage.value = ""; // 清空輸入框內(nèi)容
      }
      channel.onmessage = (event) => {
const message = event.data;
const messageDiv = document.getElementById("message");
messageDiv.innerHTML = message;
      }
    </script>
  </body>
</html>

上面的例子展示了如何使用 Broadcast Channel API 實(shí)現(xiàn)在兩個(gè)窗口之間進(jìn)行文本消息的雙向通信。

在 HTML 中，我們定義了一個(gè)輸入框和一個(gè)按鈕，用于輸入和發(fā)送消息。我們還定義了一個(gè) div 元素，用于展示接收到的消息。

在 JavaScript 中，我們創(chuàng)建了一個(gè)名為 my-channel 的廣播通道對象，并定義了一個(gè) sendMessage 函數(shù)，該函數(shù)將輸入框中的文本消息發(fā)送到廣播通道中。

同時(shí)，我們在 channel 對象上通過 onmessage 方法監(jiān)聽廣播通道上的消息，一旦有消息發(fā)送到該通道，就會觸發(fā)該方法，在該方法中將接收到的消息展示在 div 元素中。

需要注意的是，廣播通道的名字需要保持一致，才能實(shí)現(xiàn)不同窗口之間的通信。

Vibration API（設(shè)備振動）

以下是一個(gè)簡單的Web Vibration API例子：

<!DOCTYPE html>
<html>
<head>
    <title>Web Vibration API Example</title>
</head>
<body>
    <h1>Web Vibration API Example</h1>
    <button onclick="vibrate()">Vibrate</button>
    <script>
function vibrate() {
    if ("vibrate" in navigator) {
navigator.vibrate(1000); // 1秒鐘的震動
    } else {
alert("Vibration API not supported in this browser.");
    }
}
    </script>
</body>
</html>

這個(gè)例子中，當(dāng)用戶點(diǎn)擊"Vibrate"按鈕時(shí)，瀏覽器會嘗試通過Web Vibration API來觸發(fā)設(shè)備的震動功能。

如果設(shè)備支持Web Vibration API，則會進(jìn)行1秒鐘的震動，否則會彈出一個(gè)警告框提示用戶該功能不被支持。

Srceen Capture API（視頻截圖）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web Screen Capture API Example</title>
</head>
<body>
    <h1>Web Screen Capture API Example</h1>
    <button id="start-capture">Start Capture</button>
    <button id="stop-capture">Stop Capture</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script>
// 獲取DOM元素
const startCaptureBtn = document.getElementById("start-capture");
const stopCaptureBtn = document.getElementById("stop-capture");
const canvas = document.getElementById("canvas");
// 獲取媒體流（屏幕共享）并將其渲染到canvas中
async function startCapture() {
    try {
const mediaStream = await navigator.mediaDevices.getDisplayMedia();
const context = canvas.getContext("2d");
context.drawImage(video, 0, 0, canvas.width, canvas.height);
    } catch(err) {
console.error("Error: " + err);
    }
}
// 停止捕獲并停止媒體流
function stopCapture() {
    const tracks = mediaStream.getTracks();
    tracks.forEach(track => track.stop());
}
// 注冊按鈕單擊事件
startCaptureBtn.addEventListener("click", startCapture);
stopCaptureBtn.addEventListener("click", stopCapture);
    </script>
</body>
</html>

這個(gè)例子中，頁面上有兩個(gè)按鈕，一個(gè)用于開始捕獲屏幕，另一個(gè)用于停止捕獲。捕獲的內(nèi)容被呈現(xiàn)在一個(gè)畫布上。

在 startCapture() 函數(shù)中，我們使用 navigator.mediaDevices.getDisplayMedia() 方法獲取屏幕共享的媒體流，并將其渲染到canvas上。在 stopCapture() 函數(shù)中，我們停止所有媒體流的所有軌道，以結(jié)束捕獲過程。

Intersection Observer API（元素監(jiān)聽）

以下是一個(gè)示例，演示了如何使用 Intersection Observer API 在元素進(jìn)入視口時(shí)進(jìn)行檢測：

<!DOCTYPE html>
<html>
  <head>
    <title>Intersection Observer Example</title>
    <style>
      .box {
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 50px;
      }
      .visible {
background-color: red;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
      const boxes = document.querySelectorAll(".box");
      const options = {
rootMargin: "0px",
threshold: 0.5
      };
      const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
  if (entry.isIntersecting) {
    entry.target.classList.add("visible");
  } else {
    entry.target.classList.remove("visible");
  }
});
      }, options);
      boxes.forEach(box => {
observer.observe(box);
      });
    </script>
  </body>
</html>

在這個(gè)示例中，我們首先選擇所有具有“box”類的元素。然后，我們創(chuàng)建一個(gè)帶有0像素的rootMargin和0.5的閾值的IntersectionObserver實(shí)例。這意味著當(dāng)元素的50％位于視口內(nèi)時(shí)，它將被視為可見。

然后，我們循環(huán)遍歷每個(gè)盒子元素，并在我們的觀察者實(shí)例上調(diào)用observe方法，將盒子元素作為參數(shù)傳遞。

最后，在IntersectionObserver實(shí)例的回調(diào)函數(shù)中，我們檢查每個(gè)條目是否與視口相交。如果是，則將“visible”類添加到條目的目標(biāo)元素中，否則將其刪除。

參考

web-api-examples
MDN-Web APIs
你（可能）不知道的 web api

以上就是開發(fā)效率翻倍的Web API使用技巧的詳細(xì)內(nèi)容，更多關(guān)于Web API使用技巧的資料請關(guān)注其它相關(guān)文章！

JavaScript

上一條：深度剖析JavaScript作用域從局部到全局一網(wǎng)打盡下一條：解析使用useDark(),發(fā)現(xiàn)transition 動畫失效

排行榜

					
					django從后臺返回html代碼的實(shí)例
Docker容器如何更新打包并上傳到阿里云
JetBrains IntelliJ IDEA 配置優(yōu)化技巧
Django Model層F，Q對象和聚合函數(shù)原理解析
低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案
ASP.NET MVC使用異步Action的方法
Django結(jié)合使用Scrapy爬取數(shù)據(jù)入庫的方法示例
PHP循環(huán)與分支知識點(diǎn)梳理
ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)
ASP實(shí)現(xiàn)加法驗(yàn)證碼
ajax請求后臺得到j(luò)son數(shù)據(jù)后動態(tài)生成樹形下拉框的方法
				