7 个 JavaScript Web API 来构建你不知道的未来网站

随著控制技术的飞速发展，为开发者提供更多了更让人不可思议的新辅助工具和API。但据介绍，在100 数个 API中，多于5%被开发者积极主动采用。

让他们来看一看许多管用的Web API，它能协助您将中文网站推至火星！

Screen Capture API，简而言之，容许您捕捉萤幕的文本，使构筑萤幕录影机的操作过程显得毫不费力。

您须要两个音频原素来显示捕捉的萤幕。已经开始按键将已经开始萤幕捕捉

。

Your browser doesnt support HTML5. Start

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);

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，您须要用户进行交互。例如，按键点击或触摸事件。

Intersection Observer API容许您检测原素何时进入或离开视口。这对于实现无限滚动非常管用。

注意：由于我个人的喜好，该演示采用React ，但您能使用任何框架或vanilla JavaScript。

剪贴板API容许您读取数据并将数据写入剪贴板。这对于实现复制到剪贴板

功能很管用。

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

有没有想过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 。否则，它会抛出错误。

ScreenOrientation API容许您检查萤幕的当前方向，即使能将其锁定

到特定方向。

async function lockHandler() { await screen.orientation.lock(“portrait”); } function releaseHandler() { screen.orientation.unlock(); } function getOrientation() { return screen.orientation.type; }

全屏API容许您全屏

表明两个原素或整个页面。

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

注意：要也采用全屏 API，您须要用户进行交互。