JavaScript 全屏切换需调用 requestFullscreen() 和 exitFullscreen() API，监听 fullscreenchange 事件，并在用户交互中触发、处理 Promise 及兼容性前缀。
javascript 实现全屏切换效果，核心是调用浏览器提供的 element.requestfullscreen() 和 document.exitfullscreen() api，并监听全屏状态变化来同步 ui 或逻辑。
触发全屏：调用 requestFullscreen()
要让某个元素（如视频容器、画布或整个 body）进入全屏，需在其上调用 requestFullscreen() 方法。该方法返回 Promise，成功后进入全屏；失败时会拒绝 Promise，常见原因包括：用户未主动交互触发（如不在 click 事件中）、元素不可见、被 iframe 隔离且未设置 allow="fullscreen"。
- 确保在用户手势事件（如
click、keydown）中调用，否则多数浏览器会静默拒绝 - 推荐作用于具体容器而非直接操作
document.body，避免样式意外拉伸 - 可加简单错误处理：
container.requestFullscreen()
.catch(err => console.warn('全屏请求失败:', err));
});
退出全屏：调用 exitFullscreen()
退出全屏不作用于元素，而是调用 document.exitFullscreen()。它也返回 Promise，可用于链式响应。
- 可在任意时机调用，比如按 ESC 键、点击关闭按钮、或监听到全屏状态丢失时自动清理
- 调用前建议先检查是否处于全屏状态，避免无意义调用：
document.exitFullscreen();
}
监听全屏状态变化
全屏进入/退出会触发 fullscreenchange 事件，绑定在 document 上即可捕获。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
document.fullscreenElement为当前全屏的元素（null表示未全屏） - 可根据该值更新按钮图标、隐藏控制栏、重设 canvas 尺寸等
- 注意：该事件不区分是进入还是退出，需自行判断
if (document.fullscreenElement) {
console.log('已进入全屏');
toggleControls(false); // 隐藏 UI 控件
} else {
console.log('已退出全屏');
toggleControls(true);
}
});
兼容性与前缀处理（仅必要时）
现代浏览器（Chrome 71+、Firefox 64+、Safari 12.1+、Edge 79+）已统一支持标准 API。若需兼容旧版 Safari 或 Android Chrome，可按需补充前缀：
立即学习“Java免费学习笔记（深入）”；
-
element.webkitRequestFullscreen()（旧 Safari） document.webkitExitFullscreen()-
document.mozCancelFullScreen()（旧 Firefox）
实际项目中建议用标准 API + try-catch 包裹，或借助轻量工具函数封装兼容逻辑，不必手动维护多套写法。
