如何使用 JavaScript 创建全屏 API？

全屏 API 是一个浏览器 API，允许开发者向用户请求全屏显示，并在需要时退出全屏。

使用全屏 API 相对简单。首先，您必须检查您使用的浏览器是否支持全屏 API。您可以通过检查文档对象上全屏 API 的 enabled 属性是否存在来实现。

如果浏览器不支持全屏 API，您仍然可以通过其他方法（例如打开一个新的浏览器窗口）为用户提供全屏体验。

假设浏览器支持全屏 API，下一步是创建一个函数，该函数将向用户请求全屏显示。此函数必须在用户发起的事件（例如单击事件）中调用。

语法

if (document.documentElement.requestFullscreen) {
   document.documentElement.requestFullscreen();
}

要以全屏模式打开页面，我们使用 requestFullscreen() 方法。

方法

requestFullscreen() 方法用于向用户请求全屏显示。此方法可以对任何元素调用，但最常对 document 元素调用。我们使用document.documentElement访问整个页面。然后应用requestFullscreen()方法以全屏模式打开页面。

我们创建一个“进入全屏”按钮，当用户需要以全屏模式打开页面时单击该按钮。用户单击按钮后，文档将接收 fullscreenchange 事件。此事件可用于检测文档何时进入或退出全屏模式。

示例

以全屏模式打开页面

在下面的示例中，我们使用 JavaScript 创建了一个全屏 API，该 API 在单击按钮时以全屏模式打开输出窗口。我们还设计了一个退出按钮来退出全屏。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
   <h1>Full Screen API with JavaScript</h1>
   <p>Click on the "Enter Full Screen" button to open in Fullscreen mode</p>
   <button onclick="EnterFullScreen();">
      Enter Full Screen
   </button>
   <button onclick="ExitFullScreen();">Exit Full Screen</button>
   <p>Click on the "Exit Full Screen" button or press "Esc" key to exit fullscreen</p>
   <script>
      function EnterFullScreen() {
         if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
         }
      }
      function ExitFullScreen() {
         if (document.exitFullscreen) {
            document.exitFullscreen();
         }
      }
   </script>
</body>
</html>

示例

以全屏模式打开视频

在下面的示例中，我们使用 JavaScript 创建了一个全屏 API，用于以全屏模式打开视频。

<!DOCTYPE html>
<html>
<body>
   <h1>Full Screen API with JavaScript</h1>
   <p>Click on the "Enter Full Screen" button to open video in full screen mode</p>
   <button onclick="EnterFullScreen();">
      Enter Full Screen
   </button>
   <p>Press "Esc" key to exit fullscreen</p>
   <iframe id="myvideo" src="https://www.youtube.com/embed/Q4O6yxUC_8g?enablejsapi=1"></iframe>
   <script>
      var elem = document.getElementById("myvideo");
      function EnterFullScreen() {
         if (elem.requestFullscreen) {
            elem.requestFullscreen();
         }
      }
   </script>
</body>
</html>

浏览器兼容性

所有主要浏览器（包括 Internet Explorer、Firefox、Chrome、Safari 和 Opera）都支持全屏 API。但是，全屏 API 仍然是一个相对较新的 API，因此可能会发生变化。

使用全屏 API 有许多好处。首先，它允许您为用户提供更沉浸式的体验。其次，它有助于减少干扰并提高注意力。最后，它可以用来创建独特的视觉效果。

使用全屏 API 也有一些潜在的缺点。首先，它可能会被广告商和其他第三方内容提供商滥用。其次，很难设计在全屏和非全屏模式下都能正常工作的用户界面。最后，一些用户可能会发现全屏体验令人迷惑。

全屏 API 是一种强大的工具，可用于创建独特且身临其境的 用户体验。但是，务必负责任地使用全屏 API，并在将其应用于您自己的 Web 应用程序之前考虑其潜在缺点。

更新于：2022年8月4日

795 次浏览

启动您的职业生涯

通过完成课程获得认证

开始
广告