js实现全屏和退出全屏

114 阅读1分钟
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="btns">
      <button type="button" id="exitBtn" class="btn" onClick="exitFullscreen()">
        退出全屏
      </button>
      <button type="button" id="btn" class="btn" onClick="fullScreen()">
        全屏
      </button>
    </div>
    <script>
      function fullScreen() {
        var de = document.documentElement;
        if (de.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
          de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
          document.documentElement.webkitRequestFullScreen();
        }
      }
      function exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    </script>
  </body>
</html>

```<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="btns">
      <button type="button" id="exitBtn" class="btn" onClick="exitFullscreen()">
        退出全屏
      </button>
      <button type="button" id="btn" class="btn" onClick="fullScreen()">
        全屏
      </button>
    </div>
    <script>
      function fullScreen() {
        var de = document.documentElement;
        if (de.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
          de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
          document.documentElement.webkitRequestFullScreen();
        }
      }
      function exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    </script>
  </body>
</html>