网页全屏的代码实现要不要了解一下（最全）_浏览器 代码实现全屏模式

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

全屏模式可以让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事件进行监听，这样在请求进入全屏模式成功或者失败时都能收到事件通