js实现页面全屏展示

最近做一个网页项目，用户要求可以全屏展示，进入系统后隐藏地址栏，于是乎，经过调研就选择了全屏API，即便如此还是遇到了一些问题，总结一下，写下此篇文章。

全屏模式

获取Element节点，然后使用requestFullscreen方法，可以使得这个节点全屏。

const openFullScreen = () => {
  const full = document.getElementById('fullscreen')
  if (full.RequestFullScreen) {
    full.RequestFullScreen()
  } else if (full.mozRequestFullScreen) {
    full.mozRequestFullScreen()
  } else if (full.webkitRequestFullScreen) {
    full.webkitRequestFullScreen()
  } else if (full.msRequestFullscreen) {
    full.msRequestFullscreen()
  }
}

退出全屏模式

document对象的exitFullscreen方法用于取消全屏。用户手动按下ESC键，也可以退出全屏键。

const exitFullScreen = () => {
  if (document.exitFullScreen) {
    document.exitFullScreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

获取全屏元素

document.fullscreenElement属性返回正处于全屏状态的Element节点，如果当前没有节点处于全屏状态，则返回null。可以通过此方法判断是否在全屏状态。

const fullscreenElement =
  document.fullscreenElement ||
  document.mozFullScreenElement ||
  document.webkitFullscreenElement;

注意事项

💥 想要全屏的元素都应该在这个Element节点下面，否则的话全屏时不会展示。如下图的html结构，点击单开弹框依然无法在全屏模式下看到弹窗，推出全屏时会看到弹窗已经出现。如果想避免这种莫名的问题，可以把document.getElementById('fullscreen') 改成document.documentElement，让整个HTML全屏。

💥 requestFullscreen方法只能是用户主动触发才可以，如果想在页面加载时通过js调用方法或者是触发click事件触发，我劝你还是放弃吧，在控制台出现如下警告：

💥 刷新页面也会自动退出全屏模式；

💥 如果想改变全屏状态时的样式，首先可以在全屏时添加一个calss，此外也可以使用:full-screen伪类，大部分浏览器都支持，检查全屏时元素，也是有使用:full-screen伪类的。