小編精選 - 技術文章翻譯 · 03月13日

7 個還不流行，但即將全面支援的好用 JavaScript Web APIs

隨著技術的日新月異，開發人員正在獲得令人難以置信的新工具和API。

讓我們來看看一些有用的 Web API，它們可以幫助您將網站變得更強大！

原文出處：https://dev.to/ruppysuppy/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-38bc

1. Screen Capture API

螢幕截圖 API，顧名思義，允許您截圖螢幕的內容，讓開發 螢幕錄像機 的過程變得輕而易舉。

您需要一個 video 元素來顯示要抓的畫面。開始按鈕將開始抓取畫面。

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>

const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject =
    await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
}

startBtn.addEventListener("click", startRecording);

2. Web Share API

Web Share API 允許您將文字、連結和甚至檔案從網頁共享到設備上安裝的其他應用程式。

async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}

注意： 要使用 Web Share API，您需要用戶進行過互動。例如，按鈕點擊或觸摸事件。

3. Intersection Observer API

Intersection Observer API 允許您檢測元素何時進入或離開畫面。這對於實現無限滾動非常有用。

https://codepen.io/ruppysuppy/pen/abBeZwj

注意： 由於我個人的喜好，該範例使用 React，但您可以使用 任何框架 或 vanilla JavaScript。

4. Clipboard API

剪貼板 API 允許您讀取資料並將資料寫入剪貼板。這對於開發 複製到剪貼板 功能很有用。

async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}

5. Screen Wake Lock API

有沒有想過 YouTube 如何防止螢幕在播放影片時被關閉？其實，那是因為 Screen Wake Lock API。

let wakeLock = null;

async function lockHandler() {
  wakeLock = await navigator.wakeLock.request("screen");
}

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}

注意：如果頁面已經在螢幕上可見，您只能使用螢幕喚醒鎖定 API。否則，它會拋出錯誤。

6. Screen Orientation API

螢幕方向 API 允許您檢查螢幕的當前方向，甚至將其鎖定到特定方向。

async function lockHandler() {
  await screen.orientation.lock("portrait");
}

function releaseHandler() {
  screen.orientation.unlock();
}

function getOrientation() {
  return screen.orientation.type;
}

7. Fullscreen API

全屏 API 允許您以全屏顯示元素或整個頁面。

async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}

async function exitFullscreen() {
  await document.exitFullscreen();
}

注意：要同時使用全屏 API，您需要用戶進行過互動。

以上簡單分享，希望對您有幫助！

2個讚 0留言 6,030瀏覽

按讚的人：

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。