Fullscreen API

最新推荐文章于 2025-06-14 09:00:02 发布

原创最新推荐文章于 2025-06-14 09:00:02 发布 · 235 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #ecmascript

本文探讨了FullscreenAPI如何全屏显示元素，包括其基本用法如requestFullscreen和exitFullscreen，以及针对不同浏览器的兼容性解决方案。同时介绍了如何通过兼容函数实现跨浏览器的全屏请求，并关注了CSS伪元素:fullscreen的使用和兼容性前缀。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Fullscreen API 可以使用你以全屏模式打开或关闭元素。例如，允许 video 或 canvas 元素，使其占据整个屏幕的。

全屏显示可以是任意元素
HTML5 API 存在兼容性问题，即使高版本浏览器也有兼容性问题
不同浏览器需要添加不同的前缀 webkit、moz、o、ms

Fullscreen API 的兼容情况

基本用法

主要了解它的两个方法：

document.requestFullscreen() 在系统上以全屏模式显示选定的元素，从而关闭其他应用程序以及浏览器和系统 UI 元素。
document.exitFullscreen() 将全屏模式退出到正常模式。

const fullscreen = (mode = true, el = 'body') =>
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen()

fullscreen() // 默认全屏模式打开 "body"
fullscreen(false) // 退出全屏模式

:fullscreen CSS 伪元素代表一个元素，当浏览器是在全屏模式下的显示。

.elem:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

兼容

并不是所有的浏览器都支持 Fullscreen API，你可以做一下适当的兼容来解决问题。

function launchFullScreen(elem) {
  if (elem.requestFullScreen) {
    elem.requestFullScreen()
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen()
  } else if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen()
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen()
  } else {
    elem.oRequestFullScreen()
  }
}

对应的，也需要添加 CSS 前缀。注意：有些使用旧的 :full-screen 语法而不是标准 :fullscreen。

div:-webkit-full-screen {}
:-moz-full-screen {}
:-o-full-screen {}
:-ms-fullscreen {}