JavaScript实现网页全屏

最新推荐文章于 2025-04-01 15:45:39 发布

今晚哒老虎

最新推荐文章于 2025-04-01 15:45:39 发布

阅读量1.1k

点赞数 6

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/guo__hang/article/details/135200971

版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

浏览器为了安全起见，只能通过用户主动触发的方式开启全屏，比如点击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>