JavaScript全屏API通过requestFullscreen()方法实现元素全屏，需用户手势触发、处理浏览器前缀兼容性，并监听fullscreenchange事件检测状态变化。
JavaScript 使用全屏 API 将指定元素全屏显示，核心是调用该元素的 requestFullscreen() 方法（注意拼写是 Fullscreen，不是 Fullscreened 或 FullScreen），并处理浏览器前缀和兼容性问题。
基础用法：调用 requestFullscreen()
现代浏览器基本支持标准方法，直接在目标元素上调用即可：
- 确保目标元素已存在于 DOM 中（例如通过
document.getElementById或querySelector获取） - 调用
element.requestFullscreen() - 该方法返回一个 Promise，可监听成功或失败
示例：
const box = document.getElementById('myBox');
if (box) {
box.requestFullscreen()
.then(() => console.log('进入全屏成功'))
.catch(err => console.error('全屏请求被拒绝或不支持:', err));
}
兼容旧版浏览器（带前缀）
部分老版本 Chrome、Firefox、Safari 曾使用带前缀的方法，现在虽已废弃，但若需支持较老环境（如 Chrome ≤ 57、Firefox ≤ 63），可做兼容封装：
立即学习“Java免费学习笔记（深入）”；
-
requestFullscreen（标准） -
webkitRequestFullscreen（旧 Safari / Chrome） -
mozRequestFullScreen（旧 Firefox） -
msRequestFullscreen（旧 Edge）
推荐写法（自动匹配可用方法）：
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
注意事项与限制
全屏 API 受严格的安全策略约束，必须满足以下条件才能生效：
-
必须由用户手势触发（如
click、keydown），不能在页面加载、定时器或异步回调中直接调用 -
iframe 需显式允许：若目标元素在 iframe 内，iframe 必须设置
allow="fullscreen"属性 -
部分元素不支持：例如
<iframe>、<canvas>等多数块级元素支持，但<img>或行内元素需包裹在容器中再调用 -
退出全屏：调用
document.exitFullscreen()（同样有对应前缀）
监听全屏状态变化
可通过监听 fullscreenchange 事件获知是否进入/退出全屏：
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
console.log('当前全屏元素:', document.fullscreenElement);
} else {
console.log('已退出全屏');
}
});
注意属性名是 fullscreenElement（无大写 F），不是 fullScreenElement。
