隨著技術(shù)的日新月異，為開(kāi)發(fā)人員提供了令人難以置信的新工具和API。但據(jù)了解，在100 多個(gè) API中，只有5%被開(kāi)發(fā)人員積極使用。
讓我們來(lái)看看一些有用的Web API，它們可以幫助您將網(wǎng)站推向月球！
1、 截屏接口Screen Capture API，顧名思義，允許您捕獲屏幕的內(nèi)容，使構(gòu)建屏幕錄像機(jī)的過(guò)程變得輕而易舉。
您需要一個(gè)視頻元素來(lái)顯示捕獲的屏幕。開(kāi)始按鈕將開(kāi)始屏幕捕獲。
<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、網(wǎng)絡(luò)共享API
Web Share API允許您將**網(wǎng)頁(yè)中的文本、鏈接甚至文件**共享到設(shè)備上安裝的其他應(yīng)用程序。
async function shareHandler() { navigator.share({ title: "Tapajyoti Bose | Portfolio", text: "Check out my website", url: "https://tapajyoti-bose.vercel.app/", });}
注意：要使用Web Share API，您需要用戶進(jìn)行交互。例如，按鈕點(diǎn)擊或觸摸事件。
3、路口觀察器APIIntersection Observer API允許您檢測(cè)元素何時(shí)進(jìn)入或離開(kāi)視口。這對(duì)于實(shí)現(xiàn)無(wú)限滾動(dòng)非常有用。
在線瀏覽地址：https://codepen.io/ruppysuppy/pen/abBeZwj
注意：由于我個(gè)人的喜好，該演示使用React ，但您可以使用**任何框架或vanilla Javascript**。
4、剪貼板API剪貼板API允許您讀取數(shù)據(jù)并將數(shù)據(jù)寫(xiě)入剪貼板。這對(duì)于實(shí)現(xiàn)復(fù)制到剪貼板功能很有用。
async function copyHandler() { const text = "https://tapajyoti-bose.vercel.app/"; navigator.clipboard.writeText(text);}
注意：如果頁(yè)面已經(jīng)在屏幕上可見(jiàn)，您只能使用屏幕喚醒鎖定 API 。否則，它會(huì)拋出錯(cuò)誤。
5.屏幕喚醒鎖定API有沒(méi)有想過(guò)YouTube如何防止屏幕在播放視頻時(shí)被關(guān)閉？好吧，那是因?yàn)镾creen Wake Lock API。
let wakeLock = null;async function lockHandler() { wakeLock = await navigator.wakeLock.request("screen");}async function releaseHandler() { await wakeLock.release(); wakeLock = null;}
注意：如果頁(yè)面已經(jīng)在屏幕上可見(jiàn)，您只能使用屏幕喚醒鎖定 API 。否則，它會(huì)拋出錯(cuò)誤。
6、屏幕方向APIScreen Orientation API允許您檢查屏幕的當(dāng)前方向，甚至**可以將其鎖定**到特定方向。
async function lockHandler() { await screen.orientation.lock("portrait");}function releaseHandler() { screen.orientation.unlock();}function getOrientation() { return screen.orientation.type;7、全屏API
全屏API允許您**全屏**顯示一個(gè)元素或整個(gè)頁(yè)面。
async function enterFullscreen() { await document.documentElement.requestFullscreen();}async function exitFullscreen() { await document.exitFullscreen();}
注意：要也使用全屏 API，您需要用戶進(jìn)行交互。
謝謝閱讀，如果對(duì)你有幫助，記得點(diǎn)贊支持！
