js 全屏显示 退出全屏显示

requestFullScreen    // 全屏显示
cancelFullScreen     // 退出全屏
fullScreenElement    // 全屏状态

/*
不同浏览器添加不同前缀:
chrome:   webkit;
firefox:   moz;
ie:   ms;
oprea:   o;
Safari:   webkit;
*/
获取是否全屏状态

const fullScreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.msFullScreenElement || oFullscreenElement

const div = document.querySelector('div')

 document.querySelector("#button").onclick = function () {
 if(fullScreen) { // 取消全屏
    if (document.cancleFullScreen) {
      document.cancleFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if(document.mozCacelFullScreen) {
      document.mozCacelFullScreen();
    } else if(document.msCanclFullScreen) {
      document.msCanclFullScreen();
    }
   } else {  // 申请全屏
       if (div.requestFullScreen) {
        div.requestFullScreen()
      } else if (div.webkitRequestFullScreen) {
        div.webkitRequestFullScreen()
      } else if (div.mozRequestFullScreen) {
        div.mozRequestFullScreen()
      } else if (div.msRequestFullScreen) {
        div.msRequestFullScreen()
      } else if (oRequestFullScreen) {
        div.oRequestFullScreen()
      }
   }
}

原文链接：zhuanlan.zhihu.com/p/107344730