關注留言點贊，帶你了解最流行的軟體開發知識與最新科技行業趨勢。
随着技術的日新月異，為開發人員提供了令人難以置信的新工具和API。但據了解，在100 多個 API中，隻有5%被開發人員積極使用。
讓我們來看看一些有用的Web API，它們可以幫助您将網站推向月球！
1. 截屏接口
Screen Capture API，顧名思義，允許您捕獲螢幕的内容，使建構螢幕錄像機的過程變得輕而易舉。
您需要一個視訊元素來顯示捕獲的螢幕。開始按鈕将開始螢幕捕獲。
<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.網絡共享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允許您檢測元素何時進入或離開視口。這對于實作無限滾動非常有用。
注意：由于我個人的喜好，該示範使用React ，但您可以使用任何架構或vanilla JavaScript。
4.剪貼闆API
剪貼闆API允許您讀取資料并将資料寫入剪貼闆。這對于實作複制到剪貼闆功能很有用。
async function copyHandler() { const text = "https://tapajyoti-bose.vercel.app/"; navigator.clipboard.writeText(text);}
5.螢幕喚醒鎖定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.螢幕方向API
Screen Orientation API允許您檢查螢幕的目前方向，甚至可以将其鎖定到特定方向。
async function lockHandler() { await screen.orientation.lock("portrait");}function releaseHandler() { screen.orientation.unlock();}function getOrientation() { return screen.orientation.type;}
7.全屏API
全屏API允許您全屏顯示一個元素或整個頁面。
async function enterFullscreen() { await document.documentElement.requestFullscreen();}async function exitFullscreen() { await document.exitFullscreen();}
注意：要也使用全屏 API，您需要使用者進行互動。