文章詳情頁

開發效率翻倍的Web API使用技巧

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

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

引言

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

Clipboard API（剪切板）

剪切板 API 快速將內容復制到剪切板上，下面是一鍵復制的方法：

const onClipText = (text) => {
    handleCopyValue(text)
.then(() => {
    alert("復制成功");
})
.catch(() => {
    alert("自動復制失敗，請手動復制");
});
};
const handleCopyValue = (text) => {
    //瀏覽器禁用了非安全域的 navigator.clipboard 對象
    //在線上環境會報錯 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();
// 創建標簽，并隱藏
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);
// 聚焦、復制
textArea.focus();
textArea.select();
return new Promise((resolve, reject) => {
    // 不知為何，必須寫這個三目，不然copy不上
    document.execCommand("copy") ? resolve() : reject();
    textArea.remove();
});
    }
};

執行onClipText方法，即可將想復制內容，復制到用戶的剪切板上。

Fullscreen API（進入/退出全屏）

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

下面是一個 Fullscreen API 的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fullscreen API Example</title>
  </head>
  <body>
    <div id="booktext">
       <h1>正能量先鋒</h1>
<p>在今天這個快節奏、競爭激烈的時代里，我們時常會面臨一些挑戰和困難，有時甚至會讓我們感到絕望和沮喪。但我們應該時刻銘記，每一個困難背后都有無限的機會和可能。</p>
       <button onclick="toggleFullscreen()">進入/退出沉浸式閱讀</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 實現一個視頻全屏播放的功能。

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

在 JavaScript 中，我們首先通過 getElementById 獲取到視頻容器，然后通過 querySelector 獲取到視頻元素本身。接著，定義了一個 toggleFullscreen 函數來監聽按鈕的點擊事件，并根據當前全屏狀態調用 requestFullscreen 或 exitFullscreen 來切換全屏狀態。

需要注意的是，requestFullscreen 方法可能會被瀏覽器阻止，例如因為用戶未授權。因此在實際使用中，我們需要使用 catch 方法來捕獲 requestFullscreen 方法的調用錯誤信息。

Online State API（網絡狀態）

就是獲取當前的網絡狀態，同時也有對應的事件去響應網絡狀態的變化。

window.addEventListener("online", onlineHandler); // 聯網時
window.addEventListener("offline", offlineHandler); // 斷網時

比如很常見的一個需求，斷網時提示，網絡恢復時刷新。

實現斷網重連：

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

這樣就可以監聽用戶的網絡狀態，如網絡鏈接、斷開時可以對用戶進行提示以及做相應的邏輯處理。

Page Visibility API（頁面顯示）

我們可以用document.visibitilityState來監聽網頁可見度，是否卸載..

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

比如一個視頻的例子來展示：

<!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",() => {
    // 通過這個方法來獲取當前標簽頁在瀏覽器中的激活狀態。
    switch(document.visibilityState){
case"prerender": // 網頁預渲染 但內容不可見
case"hidden":    // 內容不可見 處于后臺狀態，最小化，或者鎖屏狀態
video.puase()
case"visible":   // 內容可見
video.play()
case"unloaded":  // 文檔被卸載
video.destory()
    }
});
</script>
</body>
</html>

這個API的用處就是用來響應我們網頁的狀態，如果這個標簽頁顯示則視頻就開始播放，隱藏就暫停，關閉就卸載。

Screen Orientation API（頁面方向）

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

// 獲取屏幕方向對象
const orientation = screen.orientation;
// 監聽屏幕方向變化事件
orientation.addEventListener("change", () => {
  console.log(`屏幕方向變為：${orientation.type}`);
});
// 鎖定屏幕方向為橫屏
orientation.lock("landscape").then(() => {
  console.log("屏幕方向已鎖定為橫屏");
}).catch((err) => {
  console.log(`鎖定屏幕方向失敗：${err}`);
});
// 解鎖屏幕方向
orientation.unlock();

在這段代碼中，我們首先通過screen.orientation獲取了屏幕方向對象，并通過addEventListener方法監聽了屏幕方向變化事件。然后，我們使用lock方法將屏幕方向鎖定為橫屏，并在鎖定成功后打印了一條消息。最后，我們使用unlock方法解鎖了屏幕方向。

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

Battery API（電池信息）

以下是一個使用 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>當前電量: <span id="battery-level"></span></p>
<p>電池狀態: <span id="battery-status"></span></p>
    </div>
    <script>
// 獲取電池信息
navigator.getBattery().then(function(battery) {
    // 更新電量信息
    updateBatteryStatus(battery);
    // 監聽電池信息變化
    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>

這個例子展示了如何使用Web Battery API來獲取電池的狀態信息，并在頁面上顯示當前電量和電池狀態。

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

Web Share API（分享）

以下是一個簡單的Web Share API例子：

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

這個例子假設頁面中有一個id為share-button的分享按鈕元素。當用戶點擊該按鈕時，代碼會檢查瀏覽器是否支持Web Share API，如果支持則調用該API進行分享，否則顯示一個提示信息。

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

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

ImageCapture API（圖片抓取）

以下提供一個基本的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);
  });
// 設置ImageCapture
let imageCapture;
const track = video.srcObject.getVideoTracks()[0];
imageCapture = new ImageCapture(track);
// 添加事件監聽器
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);
    });
});

這個示例將顯示一個視頻元素和一個“Capture Image”按鈕。當用戶點擊按鈕時，它將使用ImageCapture API拍攝照片，并在畫布和圖像元素中顯示照片。

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

Selection API（文本選區）

下面是一個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）：

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

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

當用戶在頁面上選擇文本時，會觸發mouseup事件，然后調用handleSelection函數來處理選擇事件。

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

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

Performance API（性能檢測）

以下是一個使用 Web Performance API 的例子：

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

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

Geolocation API（獲取位置）

以下是一個使用 Geolocation API 獲取用戶當前位置信息的示例代碼：

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

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

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

如果獲取位置信息成功，則成功的回調函數將被調用，并傳遞包含位置信息的對象作為參數。否則將調用失敗的回調函數，并傳遞一個描述錯誤的對象作為參數。

Broadcast Channel API（跨頁面通信）

下面是一個使用 Broadcast Channel API 實現簡單的跨窗口通信的例子：

<!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"); // 創建一個廣播通道對象
      function sendMessage() {
const inputMessage = document.getElementById("input-message");
const message = inputMessage.value;
channel.postMessage(message); // 將消息發送到廣播通道中
inputMessage.value = ""; // 清空輸入框內容
      }
      channel.onmessage = (event) => {
const message = event.data;
const messageDiv = document.getElementById("message");
messageDiv.innerHTML = message;
      }
    </script>
  </body>
</html>

上面的例子展示了如何使用 Broadcast Channel API 實現在兩個窗口之間進行文本消息的雙向通信。

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

在 JavaScript 中，我們創建了一個名為 my-channel 的廣播通道對象，并定義了一個 sendMessage 函數，該函數將輸入框中的文本消息發送到廣播通道中。

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

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

Vibration API（設備振動）

以下是一個簡單的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>

這個例子中，當用戶點擊"Vibrate"按鈕時，瀏覽器會嘗試通過Web Vibration API來觸發設備的震動功能。

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

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>

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

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

Intersection Observer API（元素監聽）

以下是一個示例，演示了如何使用 Intersection Observer API 在元素進入視口時進行檢測：

<!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>

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

然后，我們循環遍歷每個盒子元素，并在我們的觀察者實例上調用observe方法，將盒子元素作為參數傳遞。

最后，在IntersectionObserver實例的回調函數中，我們檢查每個條目是否與視口相交。如果是，則將“visible”類添加到條目的目標元素中，否則將其刪除。

參考

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

以上就是開發效率翻倍的Web API使用技巧的詳細內容，更多關于Web API使用技巧的資料請關注其它相關文章！

JavaScript

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

排行榜

					
					python中HTMLParser模塊知識點總結
JSP+Servlet實現文件上傳到服務器功能
Ajax對xml信息的接收和處理操作實例分析
ajax請求后臺得到json數據后動態生成樹形下拉框的方法
asp批量添加修改刪除操作示例代碼
ASP 信息提示函數并作返回或者轉向
ASP動態網頁制作技術經驗分享
基于Ajax的聊天機器人功能的實現
使用.net core 自帶DI框架實現延遲加載功能
CSS可以做的幾個令你嘆為觀止的實例分享
Intellij IDEA如何去掉@Autowired 注入警告的方法
				