📌  相关文章
📜  HTML | DOM fullscreenerror 事件(1)

📅  最后修改于: 2023-12-03 15:01:11.690000             🧑  作者: Mango

HTML | DOM fullscreenerror 事件

简介

fullscreenerror事件在尝试全屏一个元素时发生，如果全屏失败则会触发该事件。

语法
HTML
<element onfullscreenerror="myFunction()">
JavaScript
element.addEventListener("fullscreenerror", myFunction);
示例
<!DOCTYPE html>
<html>
<head>
  <style>
    #fullscreen-demo {
      background-color: pink;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id="fullscreen-demo">
    <button onclick="toggleFullScreen()">Toggle Full Screen</button>
  </div>
  <script>
    function toggleFullScreen() {
      var elem = document.getElementById("fullscreen-demo");
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        elem.requestFullscreen().catch((e) => {
          console.log("Error attempting to enable full-screen mode:", e);
        });
      }
    }

    document.addEventListener("fullscreenerror", function(event) {
      console.log("Full screen failed!", event);
    });
  </script>
</body>
</html>

在上面的示例中，我们首先为元素添加了一个点击事件，该事件将尝试全屏div元素。如果你先点击toggle全屏，然后再点击任何其他区域，就会触发fullscreenerror事件，因为失去了全屏模式。

浏览器支持

fullscreenerror事件得到支持的浏览器有：

  • Chrome: 45.0
  • Edge: 79.0
  • Firefox: 64.0
  • Internet Explorer: 不支持
  • Opera: 32.0
  • Safari: 10.0
总结

fullscreenerror事件在尝试全屏一个元素时发生，如果全屏失败则会触发该事件。它可以通过HTML或JavaScript来使用。该事件可以用于在全屏失败时进行错误处理。虽然它通常不如fullscreenchange事件重要，但它仍然是实现精细全屏控制的有用功能之一。