js全屏与取消全屏

绑定事件与获取全屏元素

$('#fullscreen').click(function () {
      let elem = document.getElementById("warp"); // 需要全屏的HTML元素
      requestFullScreen(elem);
});

判断浏览器是否全屏

function isFullscreen () {
   return document.fullscreenElement ||
       document.msFullscreenElement ||
       document.mozFullScreenElement ||
       document.webkitFullscreenElement || false
}

全屏与取消全屏

  let fullscreen = false;
  function requestFullScreen() {
      let element = document.getElementById('warp');
      // let element = document.documentElement
      if (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()
        }
      }
      fullscreen = !fullscreen
   }