12 个很少使用的 JavaScript Web API，它们将使您的网站登上月球

有超过 97 个 Web API，而您只使用了其中的 5%。让我们解锁其他 95%！

在规范的黑暗领域漫步了很长时间后，我意识到有太多的技术被遗漏了。

我写这篇文章的目的是让它们曝光。我将使用实际示例向您证明，某些 API 确实值得一试！

每个部分都将彻底检查每个 API，并提供一个有趣的示例来精美地演示实际用例。
📑 目录
🤳 屏幕方向 API
📺️ 全屏 API
📲 路口观察者 API
💤 屏幕唤醒锁定 API
💻️ 屏幕截图 API
📔 索引数据库 API
🧠 本地和会话存储 API
🎨 胡迪尼 API
🕸️ 网络共享 API
📋️ 剪贴板 API
✒️ 选择 API
👀 页面可见性 API
关于肖像模式的警告

画面太窄。尝试横向模式。

某些应用程序（例如非线性视频编辑器）不适用于垂直设备：它们在窄屏幕上效果不佳！

当然，网络应该是响应式的，但将整个宽布局移植到窄显示器并不总是值得的。

如果我们可以在用户的​​设备向错误的方向旋转时发出警告，那不是很好吗？让我向您介绍… Screen Orientation API！

为了避免错误，检查对屏幕方向 API 的支持很重要。这很简单：if (‘orientation’ in screen)。您将在整篇文章中一次又一次地看到这种模式。
屏幕方向 API
浏览器公开一个名为 的全局变量screen，我们将使用它来访问我们需要的信息。ScreenOrientation可以使用 访问该实例screen.orientation。我们将在本节中使用这个对象。

检测屏幕方向

屏幕方向类型和角度：https://w3c.github.io/screen-orientation/#dfn-screen-orientation-values-table

与流行的看法相反，屏幕有四种定向方式，如上图所示。但是我们只对知道屏幕是纵向还是横向模式感兴趣，并且很容易编写一个函数来准确地告诉我们：
function getOrientation() {
const isPortrait = screen.orientation.type.startswith(‘portrait’)
return isPortrait ? ‘portrait’ : ‘landscape’
}
锁定屏幕方向
Instagram 等本机应用程序在使用时会锁定屏幕方向。随着PWA 和本机应用程序之间的界限日益模糊，此功能也出现在网络上也就不足为奇了。

虽然支持较少，但也可以使用以下代码片段锁定和解锁屏幕方向：
screen.orientation.lock(orientation)
也不要忘记处理错误，因为正如我已经说过的，这个特性没有得到很好的支持。

让您的网站成为全屏体验
浏览器用大量 UI 元素覆盖我们的网站，分散了用户对重要内容的注意力。

Chrome 移动版屏幕截图，突出显示了浏览器的 UI 元素。

当涉及沉浸式内容时，这尤其是一个问题，例如：

电影，
游戏,
最大化图像。
这样的例子不胜枚举。

值得庆幸的是，全屏 API 的出现扭转了局面！

所有现代浏览器都很好地支持此功能，所以不用担心使用它。

进入全屏模式
令人惊讶的是，任何 DOM 元素都可以进入全屏模式：
el.requestFullscreen()
然而，大多数时候，我们希望整个页面进入全屏。根文档元素 — — 可以在 JavaScript 中使用document.documentElement.

因此，在网络上看到这段代码片段并不罕见：
document.documentElement.requestFullscreen()
离开全屏模式
有多种退出方式。其中一些是浏览器默认的键盘快捷键：ESC和F11。

也可以通过切换标签Ctrl+Tab或跳转窗口离开Alt+Tab。

然而，最重要的离开机制是你——开发者——提供的。您可以通过以下方式以编程方式退出全屏模式：
document.exitFullscreen()
然而，在部署环境中，通过在调用之前检查此函数是否存在来避免错误很重要：
if (document.exitFullscreen) {
document.exitFullscreen()
}
验证用户是否处于全屏模式
如果我们想要实现一个全屏切换，就像开始时在 Codepen中看到的那样，我们需要一种方法来确定全屏模式是否处于活动状态。

使用以下代码片段完全可以做到这一点：
document.fullscreenElement // returns ‘null’ or the fullscreen-enabled DOM element
为了更好的浏览器兼容性，我们必须检查多个属性：
document.fullscreenElement
|| document.mozFullscreenElement
|| document.msFullscreenElement
|| document.webkitFullscreenElement
有了这个，我们可以实现全屏切换：
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
在元素进入视口时对其进行动画处理
考虑当元素进入视图时您需要做某事的所有时间：

动画它，
加载更多内容（无限滚动），
延迟加载图