JavaScript实现网页全屏

2023-12-25 17:06:56

浏览器为了安全起见，只能通过用户主动触发的方式开启全屏，比如点击button。

1.通过点击按钮进行页面全屏

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.onload = openfullscreen();

      function launchIntoFullscreen(element) {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }

      function openfullscreen() {
        launchIntoFullscreen(document.documentElement);
      }

      function exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
        window.close();
      }

      function fix() {
        var screenwidth = screen.width;
        var screenhei = screen.height;
        document.getElementById("ifam").width = screenwidth;
        document.getElementById("ifam").height = screenhei;
      }
    </script>
    <style>
      #ifam {
        position: fixed;
        left: 0%;
        top: 0%;
        z-index: -1;
      }
      #fullscreen {
        position: fixed;
        left: 0%;
        top: 0%;
        z-index: 1;
      }
    </style>
  </head>
  <body onload="fix()">
    <div id="fullscreen">
      <button onclick="openfullscreen()">Open</button>
      <button onclick="exitFullscreen()">Exit</button>
    </div>
    <iframe id="ifam" src="https://docs.python.org"></iframe>
  </body>
</html>

2.点击网页任意处触发全屏

<html>
  <head>
    <script language="jscript">
      function goFullscreen() {
        // Must be called as a result of user interaction to work
        mf = document.getElementById("main_frame");
        mf.webkitRequestFullscreen();
        mf.style.display = "";
      }
      function fullscreenChanged() {
        if (document.webkitFullscreenElement == null) {
          mf = document.getElementById("main_frame");
          mf.style.display = "none";
        }
      }
      document.onwebkitfullscreenchange = fullscreenChanged;
      document.documentElement.onclick = goFullscreen;
      document.onkeydown = goFullscreen;
    </script>
  </head>
  <body style="margin: 0">
    <h1>
      Click anywhere or press any key to browse <u>Python documentation</u> in
      fullscreen.
    </h1>
    <iframe
      id="main_frame"
      src="https://docs.python.org"
      style="width: 100%; height: 100%; border: none; display: none"
    ></iframe>
  </body>
</html>

文章来源:https://blog.csdn.net/guo__hang/article/details/135200971
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。