html5使用fullscreen API实现全屏显示 html5使用全屏模式的切换控制-html教程-PHP中文网

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

蓮花仙者

发布： 2025-11-03 11:53:30

原创

656人浏览过

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();
}
}

登录后复制

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

退出全屏模式

使用 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('已退出全屏');
  }
});

登录后复制

同样，为了兼容性，可能需要监听 webkitfullscreenchange 或 msfullscreenchange 等前缀事件。

基本上就这些。掌握这几个核心方法和事件，就能实现稳定的全屏切换控制。注意权限限制：部分浏览器要求用户手势（如点击）才能触发全屏，不能由脚本自动执行。

以上就是html5使用fullscreen API实现全屏显示 html5使用全屏模式的切换控制的详细内容，更多请关注php中文网其它相关文章！