JS 全屏与退出全屏

核心代码

//全屏
function fullScreen() {
  // const rootElement = document.documentElement; //若要全屏页面div
  const element = document.querySelector(".fullScreen_panorama");
  //IE 10及以下ActiveXObject
  if (window.ActiveXObject) {
    const WsShell = new ActiveXObject('WScript.Shell');
    WsShell.SendKeys('{F11}');
    //写全屏后的执行函数
  }
  //HTML W3C 提议
  else if (element.requestFullScreen) {
    element.requestFullScreen();
    //写全屏后的执行函数
  }
  //IE11
  else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
    //写全屏后的执行函数
  }
  // Webkit (works in Safari5.1 and Chrome 15)
  else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
    //写全屏后的执行函数
  }
  // Firefox (works in nightly)
  else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
    //写全屏后的执行函数
  } else {
    alert("此设备不支持 Fullscreen API")
  }

}

//退出全屏
function fullExit() {
  //const rootElement= document.documentElement;//若要全屏页面中
  const element = document.querySelector(".fullScreen_panorama");
  //IE ActiveXObject
  if (window.ActiveXObject) {
    const WsShell = new ActiveXObject('WScript.Shell');
    WsShell.SendKeys('{F11}');
    //写退出全屏后的执行函数
  }
  //HTML5 W3C 提议
  else if (element.requestFullScreen) {
    document.exitFullscreen();
    //写退出全屏后的执行函数
  }
  //IE 11
  else if (element.msRequestFullscreen) {
    document.msExitFullscreen();
    //写退出全屏后的执行函数
  }
  // Webkit (works in Safari5.1 and Chrome 15)
  else if (element.webkitRequestFullScreen) {
    document.webkitCancelFullScreen();
    //写退出全屏后的执行函数
  }
  // Firefox (works in nightly)
  else if (element.mozRequestFullScreen) {
    document.mozCancelFullScreen();
    //写退出全屏后的执行函数
  }
}

全部代码

<!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>
  <style>
    .fullScreen_panorama {
      background-color: #dcdcdc;
      width: 100%;
      height: 20vh;

      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <div class="fullScreen_panorama">
    <button onclick="fullScreen()">全屏</button>
    <button onclick="fullExit()">退出全屏</button>
  </div>
</body>

<script>
  //全屏
  function fullScreen() {
    // const rootElement = document.documentElement; //若要全屏页面div
    const element = document.querySelector(".fullScreen_panorama");
    //IE 10及以下ActiveXObject
    if (window.ActiveXObject) {
      const WsShell = new ActiveXObject('WScript.Shell');
      WsShell.SendKeys('{F11}');
      //写全屏后的执行函数
    }
    //HTML W3C 提议
    else if (element.requestFullScreen) {
      element.requestFullScreen();
      //写全屏后的执行函数
    }
    //IE11
    else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
      //写全屏后的执行函数
    }
    // Webkit (works in Safari5.1 and Chrome 15)
    else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
      //写全屏后的执行函数
    }
    // Firefox (works in nightly)
    else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
      //写全屏后的执行函数
    } else {
      alert("此设备不支持 Fullscreen API")
    }

  }
  //退出全屏
  function fullExit() {
    //const rootElement= document.documentElement;//若要全屏页面中
    const element = document.querySelector(".fullScreen_panorama");
    //IE ActiveXObject
    if (window.ActiveXObject) {
      const WsShell = new ActiveXObject('WScript.Shell');
      WsShell.SendKeys('{F11}');
      //写退出全屏后的执行函数
    }
    //HTML5 W3C 提议
    else if (element.requestFullScreen) {
      document.exitFullscreen();
      //写退出全屏后的执行函数
    }
    //IE 11
    else if (element.msRequestFullscreen) {
      document.msExitFullscreen();
      //写退出全屏后的执行函数
    }
    // Webkit (works in Safari5.1 and Chrome 15)
    else if (element.webkitRequestFullScreen) {
      document.webkitCancelFullScreen();
      //写退出全屏后的执行函数
    }
    // Firefox (works in nightly)
    else if (element.mozRequestFullScreen) {
      document.mozCancelFullScreen();
      //写退出全屏后的执行函数
    }
  }
</script>

</html>