js实现页面全屏展示

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

在JavaScript中，实现页面全屏展示主要依赖于HTML5的Fullscreen API，这是一个相对较新的技术，因此在旧版本的浏览器上可能不受支持，现代浏览器支出如下。

检查浏览器是否支持Fullscreen API

在尝试使用Fullscreen API之前，最好先检查浏览器是否支持它。虽然现代浏览器普遍支持，但检查总是好的做法。

if (document.fullscreenEnabled ||
    document.mozFullScreenEnabled ||
    document.webkitFullscreenEnabled ||
    document.msFullscreenEnabled) {
    // 支持全屏
} else {
    // 不支持全屏
}

全屏模式

获取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伪类的。