js點擊按鈕分別實現全屏以及退出全屏的方法

<!-- js點擊按鈕分別實現全屏以及退出全屏的方法 -->
<script>
  //定義一個變量進行判斷，默認false 非全屏狀態
  var exitFullscreen = false
  // 全屏事件
  function handleFullScreen() {
    var element = document.documentElement;
    if (this.fullscreen) {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    } else {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
      }
    }
  }
</script>

js關於網頁全屏的代碼准備好了，然后就是設置按鈕，並把點擊事件放進去：
<input type="button" onclick="handleFullScreen()" value="全屏顯示ʾ" />

設置完成之后，就可以實現通過按鈕控制網頁全屏的效果了，但是問題相對應的又來了，全屏之后 ，如何退出全屏？
廢話不多說，直接上代碼：
<script>
  function exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }

  //監聽window是否全屏，並進行相應的操作,支持esc鍵退出
  window.onresize = function () {
    var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen ||
      document.msFullscreenElement || document.fullscreenElement
    ); //!document.webkitIsFullScreen都為true。因此用!!
    if (isFull == false) {
      $("#exitFullScreen").css("display", "none");
      $("#fullScreen").css("display", "");
    } else {
      $("#exitFullScreen").css("display", "");
      $("#fullScreen").css("display", "none");
    }
  }
</script>

js的代碼完成了，接下來就是創建一個按鈕來實現相對應的點擊事件了：

<input type="button" onclick="exitFullscreen()" value="退出全屏" />

將這四者全部安排到位之后，我們在使用HTML的時候就可以分別通過全屏按鈕，以及退出全屏按鈕實現相對應的網頁全屏以及退出全屏了，
另外，這個js腳本同意支持esc鍵退出全屏。