JS 全屏和退出全屏详解及实例代码

JS 全屏和退出全屏

js实现浏览器窗口全屏和退出全屏的功能，市面上主流浏览器如：谷歌、火狐、360等都是兼容的，不过IE低版本有点瑕疵（全屏状态下仍有底部的状态栏）。

这个demo基本是够了，直接复制下面的源码另存为html文件看效果吧。

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /gt;
lt;titlegt;js全屏和退出全屏代码lt;/titlegt;
lt;bodygt;
lt;!-- requestFullScreen(document.documentElement): 整个网页进入全屏
   requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
 --gt;
lt;button onclick="requestFullScreen(document.documentElement)"gt;全屏显示lt;/buttongt;
lt;button onclick="exitFull()"gt;退出全屏lt;/buttongt;
lt;/bodygt;
lt;script type="text/javascript"gt;
function requestFullScreen(element) {
  // 判断各种浏览器，找到正确的方法
  var requestMethod = element.requestFullScreen || //W3C
  element.webkitRequestFullScreen ||  //Chrome等
  element.mozRequestFullScreen || //FireFox
  element.msRequestFullScreen; //IE11
  if (requestMethod) {
    requestMethod.call(element);
  }
  else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

//退出全屏 判断浏览器种类

function exitFull() {
  // 判断各种浏览器，找到正确的方法
  var exitMethod = document.exitFullscreen || //W3C
  document.mozCancelFullScreen ||  //Chrome等
  document.webkitExitFullscreen || //FireFox
  document.webkitExitFullscreen; //IE11
  if (exitMethod) {
    exitMethod.call(document);
  }
  else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}
lt;/scriptgt;
lt;/htmlgt;

感谢阅读，希望嫩帮助到大家，谢谢大家对本站的支持！