浏览器原生全屏API我们通常只有在查看图片、视频、地图等渲染媒体元素时才会使用全屏模式。但是广泛来说，我们可以使用Ful

这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

Fullscreen API 提供了可以让网页或页面元素全屏的方式并提供了对应的事件响应

我们通常只有在查看图片、视频、地图等渲染媒体元素时才会使用全屏模式。但是广泛来说，我们可以使用Fullscreen API让任何元素进入或退出全屏模式。

进入全屏

Fullscreen API 提供了一个名为requestFullscreen()的方法可以让浏览器开启全屏模式。这个方法会返回一个Promise实例。该Promise实例会在全屏模式被激活后执行对应的resolve方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63371.815297074514!2d79.82118589335941!3d6.921837369631892!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae253d10f7a7003%3A0x320b2e4d32d3838d!2sColombo!5e0!3m2!1sen!2slk!4v1631946473215!5m2!1sen!2slk"
  width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" id="map"></iframe>

  <br>

  <button id="fullscreen">fullscreen</button>

  <script>
    const map = document.getElementById('map')
    const fullBtn = document.getElementById('fullscreen')

    fullBtn.addEventListener('click', () => {
      // 我们可以让整个文档进入全屏模式
      // document.documentElement.requestFullscreen()

      // 我们也可以设置让某一个元素进入全屏模式
      map.requestFullscreen()
    })
  </script>
</body>
</html>

fullBtn.addEventListener('click', () => {
  // requestFullscreen方法的返回值是一个promise
  // 会在进入全屏后，执行对应的resolve方法
  map.requestFullscreen().then(() => console.log('地图进入了全屏模式'))
})

退出全屏

退出全屏是很直接的，因为用户可以使用Esc键或任何其他常规方法来退出全屏模式。

然而，如果您想在点击按钮的时候去实现退出全屏模式的功能的话，您可以使用 exitFullscreen() 方法。

exitFullscreen()是文档的方法，该方法并不存在于某一个具体的元素上

exitBtn.addEventListener('click', () => {
  document.exitFullscreen()
})

全屏切换

在Fullscreen API中，并没有提供任何的方法可以让我们在全屏模式和窗口模式之间进行直接的切换。

但是借用requestFullscreen和exitFullscreen方法可以很方便的实现全屏切换

toggleBtn.addEventListener('click', () => {
  // fullscreenEnabled属性检查浏览器是否支持全屏模式，并且是否得到了用户的授权。
  if (document.fullscreenEnabled) {
    // fullscreenElement属性将返回当前处于全屏模式下的元素
    // 如果没有元素处于全屏模式下的时候，它将返回null
    if (document.fullscreenElement) {
      document.webkitExitFullscreen()
    } else {
      document.documentElement.webkitRequestFullscreen()
    }
  }
})

监听全屏切换

// Fullscreen API为文档元素或普通标签元素提供了fullscreenchange事件
// 当页面有元素进入或离开了全屏模式的时候，会触发对应的回调函数
document.addEventListener('fullscreenchange', () => {
  console.log(document.fullscreenElement ? '进入了全屏' : '退出了全屏')
})

: fullscreen

:fullscreen伪元素为全屏元素添加特定的样式。当用户进入全屏模式时，样式就会被应用到UI上。

同样我们可以使用:not(:fullscreen)伪元素为没有进入全屏的元素设置对应的样式

p:fullscreen {
  color: red;
}

p:not(:fullscreen) {
  color: blue;
}

注意：只有p元素进入全屏的时候，才会触发:fullscreen伪元素

其余元素进入全屏的时候，并不会触发p元素上的:fullscreen伪元素

: : backdrop

我们可以设置:: backdrop这个伪元素元素，来设置元素全屏的时候，其背景的状态

p:fullscreen {
  color: red;
}

p::backdrop {
  /* p进入全屏模式后，背景色透明 */
  opacity: 0;
}

浏览器原生全屏API