介绍

全屏效果和退出全屏效果，我们可能在看视频网站时看到比较多，这里来为各位介绍利用JavaScript进入全屏和退出全屏代码示例。
代码已对市面上主流浏览器如：谷歌、火狐、360等进行了兼容，不过IE低版本有点瑕疵（全屏状态下仍有底部的状态栏）。

演示代码

  1. <!DOCTYPE html>
  2. <html>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>js全屏和退出全屏代码</title>
  5. <body>
  6. <!-- requestFullScreen(document.documentElement): 整个网页进入全屏
  7.   requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
  8.  -->
  9. <button onclick="requestFullScreen(document.documentElement)">全屏显示</button>
  10. <button onclick="exitFull()">退出全屏</button>
  11. </body>
  12. <script type="text/javascript">
  13. function requestFullScreen(element) {
  14.  // 判断各种浏览器，找到正确的方法
  15.  var requestMethod = element.requestFullScreen || //W3C
  16.  element.webkitRequestFullScreen || //Chrome等
  17.  element.mozRequestFullScreen || //FireFox
  18.  element.msRequestFullScreen; //IE11
  19.  if (requestMethod) {
  20.   requestMethod.call(element);
  21.  }
  22.  else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  23.   var wscript = new ActiveXObject("WScript.Shell");
  24.   if (wscript !== null) {
  25.    wscript.SendKeys("{F11}");
  26.   }
  27.  }
  28. }
  30. // 退出全屏 判断浏览器种类
  32. function exitFull() {
  33.  // 判断各种浏览器，找到正确的方法
  34.  var exitMethod = document.exitFullscreen || //W3C
  35.  document.mozCancelFullScreen || //Chrome等
  36.  document.webkitExitFullscreen || //FireFox
  37.  document.webkitExitFullscreen; //IE11
  38.  if (exitMethod) {
  39.   exitMethod.call(document);
  40.  }
  41.  else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  42.   var wscript = new ActiveXObject("WScript.Shell");
  43.   if (wscript !== null) {
  44.    wscript.SendKeys("{F11}");
  45.   }
  46.  }
  47. }
  48. </script>
  49. </html>

我们知道，浏览器全屏通常按快捷键F11。JS控制浏览器全屏也不稀奇，它让Web应用看上去更像似原生软件应用效果。比如点餐系统、叫号系统等等。
JS让浏览器全屏及退出全屏的方法网上很多，这不是重点，重点是需注意：浏览器全屏只能通过鼠标手势点击事件去触发。

实现说明：

  1. 利用h5的requestFullScreen
  2. 摁F11实现全屏效果

    requestFullscreen全屏具体实现

    1.进入全屏

    1. function full(ele) {
    2.    if (ele.requestFullscreen) {
    3.        ele.requestFullscreen();
    4.    } else if (ele.mozRequestFullScreen) {
    5.        ele.mozRequestFullScreen();
    6.    } else if (ele.webkitRequestFullscreen) {
    7.        ele.webkitRequestFullscreen();
    8.    } else if (ele.msRequestFullscreen) {
    9.        ele.msRequestFullscreen();
    10.    }
    11. }
    ele：要全屏的元素，可以是document.body也可以是某一个div
    思路：
    1.判断该浏览器是否具有requestFullscreen方法
    2.有，则直接执行ele.requestFullscreen()；没有则做浏览器兼容判断。

    2.exitFullScreen退出全屏

    1. function exitFullscreen() {
    2.  if(document.exitFullScreen) {
    3.      document.exitFullScreen();
    4.  } else if(document.mozCancelFullScreen) {
    5.      document.mozCancelFullScreen();
    6.  } else if(document.webkitExitFullscreen) {
    7.      document.webkitExitFullscreen();
    8.  } else if(document.msExitFullscreen) {
    9.      document.msExitFullscreen();
    10.  }
    11. }

退出全屏直接使用document调用exitFullscreen方法即可。

3.获取当前全屏的节点

  1. function getFullscreenElement() {
  2.     return (        
  3.         document.fullscreenElement ||
  4.         document.mozFullScreenElement ||
  5.         document.msFullScreenElement ||
  6.         document.webkitFullscreenElement||null
  7.     );
  8. }

document.fullscreenElement()：获取当前全屏的元素。
假设id为div1的Element当前为全屏状态则 document.querySelector(“#div1”)===document.fullscreenElement

4.判断当前是否全屏

  1. function isFullScreen() {
  2.   return  !! (
  3.       document.fullscreen || 
  4.       document.mozFullScreen ||                         
  5.       document.webkitIsFullScreen ||       
  6.       document.webkitFullScreen || 
  7.       document.msFullScreen 
  8.    );
  9. }

5.判断当前文档是否能切换到全屏

  1. function isFullscreenEnabled() {
  2.     return  (
  3.         document.fullscreenEnabled ||
  4.         document.mozFullScreenEnabled ||
  5.         document.webkitFullscreenEnabled ||
  6.         document.msFullscreenEnabled
  7.     );
  8. }

注意事项：

1.document下没有requestFullscreen
2.requestFullscreen方法只能由用户触发，比如：在onload事件中不能触发
3.页面跳转需先退出全屏
4.进入全屏的元素，将脱离其父元素，所以可能导致之前某些css的失效
解决方案：使用 :full-screen伪类 为元素添加全屏时的样式（使用时为了兼容注意添加-webkit、-moz或-ms前缀）
5.一个元素A全屏后，其子元素要再全屏，需先让元素A退出全屏