隨著技術的日新月異，開發人員正在獲得令人難以置信的新工具和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，您需要用戶進行過互動。
以上簡單分享，希望對您有幫助！
按讚的人：
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章