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

随着技术的快速变化，开发人员正在获得令人难以置信的新工具和API。但已经看到，在 100+ 个 API 中，只有 5% 被开发人员积极使用。

让我们来看看一些有用的 Web API，它们可以帮助您将您的网站飞上月球！ 🌕🚀

1. 屏幕捕获接口

顾名思义，屏幕捕获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. 网页共享接口
Web 共享 API 允许您将网页中的文本、
链接甚至文件共享到设备上安装的其他应用程序。
async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}
注意：若要使用 Web 共享 API，需要用户进行交互。例如，
按钮单击或触摸事件.

3. 交叉观察者接口
交集观察器 API 允许您检测元素何时进入或离开视口。
这对于实现无限滚动非常有用.



注意：由于我个人的喜好，该演示使用 React，
但您可以使用任何框架或普通 JavaScript.

4. 剪贴板接口
剪贴板 API 允许您在剪贴板中读取和写入数据。
这对于实现复制到剪贴板功能非常有用。
async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}
5. 屏幕唤醒锁定 API
有没有想过YouTube如何防止在播放视频时屏幕关闭？
嗯，那是因为屏幕唤醒锁定API.
let wakeLock = null;

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

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}
注意：仅当页面已在屏幕上可见时，才能使用屏幕唤醒锁定 API。
否则，它将引发错误。

6. 屏幕方向接口
屏幕方向 API 允许您检查屏幕的当前方向，甚至将其锁定到特定方向。
async function lockHandler() {
  await screen.orientation.lock("portrait");
}

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

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

7. 全屏接口
全屏 API 允许您全屏显示元素或整个页面.
async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}

async function exitFullscreen() {
  await document.exitFullscreen();
}
注意：若要使用全屏 API，也需要用户的交互。

免责声明: 本文来自梵星网创作者，不代表梵星网的观点和立场。本网页内容均来自网络采集，如果侵犯了您的权益请与我司联系。

THE END