html5使用fullscreen API实现全屏显示 html5使用全屏模式的切换控制

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

html5使用fullscreen API实现全屏显示 html5使用全屏模式的切换控制

2025-11-03

浏览次数：次

返回列表

HTML5 Fullscreen API可用于控制元素全屏，需先检测document.fullscreenEnabled支持性，通过requestFullscreen()进入全屏，exitFullscreen()退出，并监听fullscreenchange事件获取状态变化，注意兼容前缀及用户手势触发限制。

html5使用fullscreen api实现全屏显示 html5使用全屏模式的切换控制

HTML5 提供了 Fullscreen API，允许开发者将页面中的某个元素或整个页面切换到全屏模式，提升用户体验。这个功能常用于视频播放、游戏、演示文稿等场景。下面介绍如何使用 Fullscreen API 实现全屏的进入与退出控制。

检测全屏支持与状态

在调用全屏方法前，建议先检查当前浏览器是否支持 Fullscreen API，并获取当前全屏状态。

注意：由于浏览器兼容性问题，Fullscreen API 存在多个带前缀的版本，需做兼容处理。

可以通过以下方式判断支持情况：

document.fullscreenEnabled：表示浏览器是否支持全屏模式。
document.fullscreenElement：返回当前处于全屏状态的元素，若无则返回 null。

进入全屏模式

要让某个元素进入全屏，调用其 requestFullscreen() 方法即可。

示例：点击按钮使页面主体进入全屏

const elem = document.documentElement; // 获取页面根元素
<p>function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /<em> Safari </em>/
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /<em> IE11 </em>/
elem.msRequestFullscreen();
}
}

你可以将该函数绑定到按钮的点击事件上。

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319 查看详情 OneStory

退出全屏模式

使用 exitFullscreen() 方法可退出全屏状态。

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

此方法无需指定元素，直接通过 document 调用即可。

监听全屏状态变化

可通过监听 fullscreenchange 事件来响应全屏状态的切换。


document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('已进入全屏');
  } else {
    console.log('已退出全屏');
  }
});