JavaScript控制浏览器全屏显示简单示例

2023年6月11日上午2:57 • JavaScript

关于“JavaScript控制浏览器全屏显示简单示例”的攻略，可以按照以下步骤进行：

1. HTML页面中添加按钮

首先，在HTML页面中添加一个按钮，以便在单击该按钮时全屏显示页面。可以使用以下代码：

<button onclick="toggleFullScreen()">全屏显示</button>

其中onclick属性绑定的是一个JavaScript函数toggleFullScreen()，这个函数实现了全屏显示的功能。

2. JavaScript实现全屏显示

然后，在JavaScript文件中添加以下代码：

function toggleFullScreen() {
  if (!document.fullscreenElement &&
      !document.mozFullScreenElement &&
      !document.webkitFullscreenElement &&
      !document.msFullscreenElement ) {
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

这是实现全屏显示的核心JavaScript函数。该函数通过判断当前是否已经全屏显示，如果没有，则尝试进入全屏模式；如果已经全屏显示，则尝试退出全屏模式。

3. 示例说明

示例一

如下代码是一个完整的示例，它实现了在单击按钮时，将整个页面全屏显示。可以将该代码保存为一个html文件，然后用浏览器打开即可查看效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>全屏示例</title>
</head>
<body>
  <h1>JavaScript控制浏览器全屏显示示例</h1>
  <p>点击下面的按钮可以将整个页面全屏显示。</p>
  <button onclick="toggleFullScreen()">全屏显示</button>
  <script>
    function toggleFullScreen() {
      if (!document.fullscreenElement &&
          !document.mozFullScreenElement &&
          !document.webkitFullscreenElement &&
          !document.msFullscreenElement ) {
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.msRequestFullscreen) {
          document.documentElement.msRequestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    }
  </script>
</body>
</html>

示例二

如果只想让部分区域全屏显示，可以设置该区域的CSS属性position: fixed和z-index: 9999，然后调用requestFullscreen()方法进入全屏模式。如下代码是一个示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>部分区域全屏示例</title>
  <style>
    #fullscreen {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      background-color: #000;
      color: #fff;
      padding: 20px;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>JavaScript控制浏览器部分区域全屏显示示例</h1>
  <p>点击下面的按钮可以将DIV元素全屏显示。</p>
  <button onclick="toggleFullScreen()">全屏显示DIV元素</button>
  <div id="fullscreen">
    <p>这是要全屏的内容</p>
  </div>
  <script>
    var elem = document.getElementById("fullscreen");
    function toggleFullScreen() {
      if (!document.fullscreenElement &&
          !document.mozFullScreenElement &&
          !document.webkitFullscreenElement &&
          !document.msFullscreenElement ) {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    }
  </script>
</body>
</html>

在该示例中，我们首先定义了一个DIV元素，然后将该元素的CSS属性设置为占满整个屏幕，以达到部分全屏显示的目的。最后通过调用requestFullscreen()方法将该区域全屏显示。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript控制浏览器全屏显示简单示例 - Python技术站