浏览器兼容(2) - 浏览器全屏

问题起因

前段时间做了一个需求，需要在进入一个页面时，页面全屏显示。这个问题跟之前的 浏览器功能(1) - JS判定当前页面是否显示在最前面 以及 浏览器功能(2) - 页面长时间休眠时 setTimeout 暂停执行 有一定的关联性。

既然有需求，那么就要想办法去实现它。

1、打开浏览器全屏

浏览器全屏需要用到的API：Element.requestFullscreen()，具体使用参照文档

// 打开浏览器全屏
launchFullscreen(){
  var el = document.documentElement
  var rfs =
    el.requestFullScreen ||
    // W3C
    el.requestFullscreen ||
    // Chrome，Safari等
    el.webkitRequestFullScreen ||
    // FireFox
    el.mozRequestFullScreen ||
    // IE11
    el.msRequestFullscreen
  if (typeof rfs != 'undefined' && rfs) {
    rfs.call(el)
  }
  return
}

注1：浏览器全屏不同浏览器在打开时有不同的一些过渡或呈现，这些都属于正常情况。(调用此 API 并不能保证元素一定能够进入全屏模式，API文档上已明确说明)

 1、谷歌、Edge没得啥过渡，闪一下直接就打开了

 2、FireFox会先全屏黑一下(过程估计在1秒左右)，然后打开全屏

 3、IE，打开全屏方法是调了的，去查看浏览器状态也是全屏状态，但实际显示情况，有时候不是全屏【浏览器说：我已经是全屏了；但眼睛说：你没有，你没动】

注2：由于调用Element.requestFullscreen()方法会让浏览器全屏，因此经常被一些恶意之人用来开发钓鱼网站或欺骗性网站。

 因此浏览器全屏方法只能手动调用 只能手动调用 只能手动调用 只能手动调用，即必须通过人为鼠标或按钮直接点击或点击后的回调调用，不能 不能 不能 不能通过其他方法或生命周期函数自动调用，模拟按钮点击调用也不行。

 自动调用或模拟调用时的报错：Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture

2、退出浏览器全屏

// 退出浏览器全屏
exitFullScreen(){
  if (document.exitFullScreen) {
    document.exitFullScreen()
  } else if (document.fullscreenElement && document.exitFullscreen) {
    // W3C，部分浏览器，尤其是360等需要先判定 当前处于全屏模式下的元素 是否存在，否则直接调用exitFullscreen，要报错
    document.exitFullscreen()
  } else if (document.msExitFullscreen) {
    // IE11
    document.msExitFullscreen()
  } else if (document.mozCancelFullScreen) {
    // FireFox
    document.mozCancelFullScreen()
  } else if (document.webkitCancelFullScreen) {
    // Chrome，Safari等
    document.webkitCancelFullScreen()
  } else {
    window.parent.showTopBottom()
  }
}

// 退出浏览器全屏方法调用  
exitFullScreen()

注1：退出浏览器全屏方法 也需要手动调用 手动调用 手动调用 手动调用，包括手动按ESC、F11(退出全屏)，F5(刷新)，以及鼠标点击按钮、鼠标点击按钮后的回调(鼠标点击和点击回调执行的间隔时间不能太长，500毫秒内)

3、其他相关API

document.fullscreenElement：返回当前处于全屏模式下的元素，如果没有使用全屏模式，则返回null

document.fullscreen：判断用户是否在全屏模式下，是则返回true

4、全屏样式CSS

全屏样式CSS，各种浏览器都提供了一个非常有用的全屏模式时CSS样式规则。有些特殊情况下，WebKit样式会出现一些问题，因此最好保持这些样式的简洁。

-webkit-full-screen {

 /* properties */
}
:-moz-full-screen {
 /* properties */
}
:-ms-fullscreen {
 /* properties */
}
:full-screen { /*pre-spec */
 /* properties */
}
:fullscreen { /* spec */
 /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
 width: %;
 height: %;
}
/* styling the backdrop*/
::backdrop {
 /* properties */
}
::-ms-backdrop {
 /* properties */
}