网页全屏的代码实现要不要了解一下（最全）

之前做过一个项目，有一个模块涉及到很多的图表和数据，于是项目经理要求我写一个全屏显示的代码，把这个模块在浏览器上进行全屏显示，从而看得更清楚一些。

全屏模式可以让web APP拥有本地APP的体验感。

Fullscreen API目前并不是所有浏览器都支持，所以为了解决兼容性问题，需要在一些API上添加前缀。

1.  进入全屏模式的API：Element.requestFullscreen()

function full(ele) {
      if (ele.requestFullscreen) {
          ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullScreen) {
          ele.webkitRequestFullScreen();
      } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen();
      }
}

ele指的是某一个需要全屏显示的元素，可以是document、div等允许可以被全屏显示的元素。调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件（上面代码有些screen中的“s”要大写）。

在调用requestFullscreen()之前，可以在document对象中对fullscreenchange 和 fullscreenerror事件进行监听，这样在请求进入全屏模式成功或者失败时都能收到事件通知。

2.  退出全屏模式的API：Document.exitFullscreen()

function exitFullscreen() {
    if(document.exitFullScreen) {
        document.exitFullScreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

退出全屏直接使用document调用exitFullscreen方法即可。调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态。如果一个元素A在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素A退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。

3.  获取当前全屏的元素：document.fullscreenElement

function getFullscreenElement() {
    return (        
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullScreenElement ||
        document.webkitFullscreenElement||null
    );
}

返回的是当前正在全屏的元素的对象。

4.  判断当前是否有元素全屏：document.fullscreen

function isFullScreen() {
  return  !! (
      document.fullscreen || 
      document.mozFullScreen ||                         
      document.webkitIsFullScreen ||       
      document.webkitFullScreen || 
      document.msFullScreen 
   );
}

如果有元素正在全屏模式，返回true；否则返回false。

5.  判断当前document对象是否可以开启全屏模式：document.fullscreenEnabled

function isFullscreenEnabled() {
    return  (
        document.fullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.msFullscreenEnabled
    );
}

如果可以在当前document对象中开启全屏模式，返回true，否则返回false。

6.  fullscreenchange事件的处理

document.addEventListener('fullscreenchange', function(){ /*code*/ });

document.addEventListener('webkitfullscreenchange', function(){ /*code*/});

document.addEventListener('mozfullscreenchange', function(){ /*code*/});

document.addEventListener('MSFullscreenChange', function(){ /*code*/});

7.  fullscreenerror事件的处理

document.addEventListener('fullscreenerror', function(){ /*code*/ });

document.addEventListener('webkitfullscreenerror', function(){ /*code*/});

document.addEventListener('mozfullscreenerror', function(){ /*code*/);

document.addEventListener('MSFullscreenError', function(){ /*code*/ });

8.  全屏模式下的样式代码：:fullscreen { }

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }

9.  在vue-cli项目中的应用举例（组件库是iView）：

除了上面的示例，我们还可以在项目中安装screenfull.js库来实现全屏操作，具体用法请细读这篇文章：https://www.jianshu.com/p/cfbb13c32c9c

10.  参考文献：

https://www.jianshu.com/p/54729c73686a

https://www.jianshu.com/p/cfbb13c32c9c

https://www.cnblogs.com/space007/p/4911446.html

https://www.cnblogs.com/minghui007/p/5601194.html

https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API