构建全屏网络APP

![1_qYsk9xT9YzyCRAWh37tuTg.jpeg][1]

全屏UI设计通过消除干扰来帮助用户保持对内容的参与。因此，我们可以看到全屏UI在现代网络应用中的使用越来越多。

因此，在这篇文章中，我将讨论 JavaScript 全屏 API 的特点，并指导你在实践中使用它们的步骤。

----------

**什么是全屏API？**
-------------

Fullscreen API 提供了将全屏整合到 DOM 元素及其子元素的方法。开发者可以使用这个功能来向最终用户强调有用的信息。

> 在查看图片、视频、地图或玩游戏时，全屏能给用户带来更好的体验。

*注意：浏览器对全屏API的支持是不同的，因为Safari并不完全支持这个功能。但我们可以通过使用供应商的前缀来解决这个问题，我将在接下来的章节中解释。*

**在实践中使用全屏API**
---------------

使用全屏 API 是非常直接的。它包含了一组有限的函数，我们需要做的只是一点点的定制。

因此，我将创建一个像下面这样的简单应用程序来演示全屏API的所有功能。你可以在[这里][2]找到完整的代码并自己测试。
![1_qITTwsW-iXDwOTtMwZmLvw.gif][4]

**第1步 - 请求全屏视图**
----------------

Fullscreen API提供了一个名为requestFullscreen()的方法，用于向浏览器请求全屏视图。这将返回一个承诺，它将在激活全屏模式后解决。
```
let fullscreenHandler = document.querySelector(".fullscreenButton");
fullscreenHandler.addEventListener("click", () => {
      document.documentElement.requestFullscreen();
});
```

在这里，我监听了一个按钮点击事件，并要求对文档进行全屏查看。因此，整个应用程序将进入全屏状态。

*我们可以在任何元素上使用 requestFullscreen() 函数。*

在我的例子中，我为地图请求了全屏，最后的实现会是这样的
```
let mapHandler = document.querySelector(".mapButton");
mapHandler.addEventListener("click", () => {
      document.querySelector("iframe").requestFullscreen();
});
```

**第2步 - 退出全屏视图**
----------------

退出全屏是直截了当的，因为用户可以使用Esc键或其他常规方法。

然而，如果你想用一个自定义按钮来实现它，你可以使用exitFullscreen()方法。这是一个适用于整个文档的方法，它将把当前元素从全屏模式切换回窗口模式。

在我的例子中，我创建了一个名为Exit Fullscreen的按钮，并使用一个事件监听器来触发这个方法
```
let exitButton = document.querySelector(".exitButton");
exitButton.addEventListener("click", () => {
      document.exitFullscreen();
});
```

**第3步 - 全屏切换**
--------------

有时候，比起使用多个按钮，你可能更喜欢用一个切换按钮来启用和禁用全屏模式。但是，全屏 API 并没有提供任何直接的方法来在窗口化和全屏视图之间切换。

然而，我们可以使用现有的方法和属性轻松实现全屏切换功能。

在这个例子中，我将使用下面的属性来检查浏览器是否支持全屏视图或应用程序是否已经处于全屏模式。

- document.fullscreenEnabled - 这个属性用来检查浏览器是否支持全屏，以及是否被用户允许。
- document.fullscreenElement - 该属性将返回当前处于全屏视图的元素。如果不在全屏模式下则返回null。

toggleFullscreen()函数将看起来像这样。
```
toggleFullscreen = () => {
  if (document.fullscreenEnabled) {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      document.documentElement.requestFullscreen();
    }
  } else {
    alert("Fullscreen is not supported!");
  }
}
```
在这里，我首先检查了浏览器的支持情况，并检查了一个元素当前是否是全屏显示。根据结果，应用程序将退出或请求全屏。
最后，你可以把这个方法绑定到一个按钮的点击或按键上，如下图。
```
// Button Click
let toggler = document.querySelector(".toggler");
toggler.addEventListener("click", () => {
    toggleFullscreen();
});
//Keyboard Key Press
document.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
      toggleFullscreen();
  }
});
```
![1_qITTwsW-iXDwOTtMwZmLvw.gif][5]

**第4步 - 全屏样式设计**
----------------

我们可以使用CSS的伪类:fullscreen为全屏元素添加特定的样式。然后，当用户请求全屏浏览时，样式就会被应用到用户界面上。
如果我将下面的CSS类应用于上例中的黄色背景<p>元素，它的背景颜色将被改为棕色，字体颜色为白色，文字则被调整到屏幕的中心。
```
p:fullscreen {
  display: flex;
  align-items: center;
  background-color: brown;
  color: white;
}
```
![1_xKMK-sx_URMp_ct1EvccoA.gif][6]

*提示：我们可以使用 ::backdrop 伪元素来样式紧挨着全屏元素下面的元素。*

**使用供应商前缀**
-----------

正如我最初提到的，Safari 浏览器并不完全支持我们上面讨论的功能。

Fullscreen API 为我们之前讨论的每个方法和属性都捆绑了供应商前缀，以克服这个问题。

这些前缀代表了常用的浏览器，如 Firefox、Edge 和 Apple 的 WebKit 引擎。

> 最常用的前缀是mos-、ms-和webkit-

例如，我们可以使用mozRequestFullScreen()、msRequestFullscreen()和webkitRequestFullscreen()来进入全屏模式。

*提示：你可以从 MDN Docs 找到 Fullscreen API 的完整厂商前缀列表。*

**总结**
------

全屏视图通常在渲染媒体元素时使用。但是往前看，我们可以使用 Fullscreen API 将任何元素带入全屏视图。

Fullscreen API 提供了一大堆可以玩的功能。但是 Fullscreen API 的可用性取决于浏览器的环境。

不过，我们可以通过使用供应商的前缀或第三方库，如 react-fullscreen、react-hooks-full-screen、screenfull.js 和 fscreen，轻松克服这些兼容性问题。

[1]: http://guobacai.com/usr/uploads/2021/10/2830503993.jpeg
  [2]: https://github.com/Dulanka-K/Fullscreen-API
  [4]: http://guobacai.com/usr/uploads/2021/10/3594328487.gif
  [5]: http://guobacai.com/usr/uploads/2021/10/2915700824.gif
  [6]: http://guobacai.com/usr/uploads/2021/10/406574286.gif

构建全屏网络APP

评论已关闭