7 个你不知道的 JavaScript Web API，用于构建未来网站🤯 感谢阅读

2025-05-26

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

感谢阅读

随着技术的快速变化，开发人员不断获得令人难以置信的新工具和API。但据观察，在100 多个 API中，只有5%被开发人员积极使用。

让我们来看看一些有用的Web API，它们可以帮助你的网站飞速发展！🌕🚀

1. 屏幕捕获 API

屏幕捕获 API，顾名思义，允许您捕获屏幕内容，使构建屏幕录像机的过程变得轻而易举。

您需要一个视频元素来显示捕获的屏幕。“开始”按钮将启动屏幕捕获。

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>
Enter fullscreen mode Exit fullscreen mode 
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);
Enter fullscreen mode Exit fullscreen mode

2. Web 分享 API

Web Share API允许您将网页上的文本、链接甚至文件共享到设备上安装的其他应用程序。

async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}
Enter fullscreen mode Exit fullscreen mode

注意：要使用Web 分享 API，您需要用户进行交互。例如，按钮点击或触摸事件。

3. 交叉口观察器 API

Intersection Observer API允许你检测元素何时进入或离开视口。这对于实现无限滚动非常有用。

注意：由于我的个人偏好，演示中使用了React ，但您可以使用任何框架或原始 JavaScript。

4.剪贴板API

剪贴板API允许你读取和写入剪贴板数据。这对于实现复制到剪贴板的功能非常有用。

async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}
Enter fullscreen mode Exit fullscreen mode

5. 屏幕唤醒锁定 API

有没有想过YouTube是如何防止播放视频时屏幕关闭的？嗯，这得益于屏幕唤醒锁 API。

let wakeLock = null;

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

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}
Enter fullscreen mode Exit fullscreen mode

注意：只有当页面已在屏幕上可见时，才能使用屏幕唤醒锁定 API。否则会抛出错误。

6. 屏幕方向 API

屏幕方向 API允许您检查屏幕的当前方向，甚至将其锁定到特定方向。

async function lockHandler() {
  await screen.orientation.lock("portrait");
}

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

function getOrientation() {
  return screen.orientation.type;
}
Enter fullscreen mode Exit fullscreen mode

方向

7. 全屏 API

全屏 API允许您全屏显示元素或整个页面。

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

async function exitFullscreen() {
  await document.exitFullscreen();
}
Enter fullscreen mode Exit fullscreen mode

注意：要使用全屏 API，您也需要用户交互。

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

  1. 我是初学者，该如何学习前端 Web 开发？
    可以参考以下文章：

    1. 前端流行语
    2. 前端开发路线图
    3. 前端项目构想
    4. 从初学者过渡到中级前端开发人员

  2. 你能指导我吗？

    抱歉，我工作已经很忙了，没时间指导任何人。

文章来源：https://dev.to/ruppysuppy/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-38bc
Devto 翻译
PREV
JavaScript 中的 7 个杀手级单行代码 JavaScript 中的 7 个杀手级单行代码 感谢您的阅读
NEXT
2023 年现代 Web 开发者的 7 个免费工具，感谢阅读