JavaScript全屏功能依赖Fullscreen API，须由用户手势触发；调用element.requestFullscreen()进入全屏，document.exitFullscreen()退出；通过document.fullscreenElement检测状态，并监听fullscreenchange事件响应变化。
JavaScript 实现全屏功能主要依靠浏览器提供的 Fullscreen API，它允许网页元素（如视频、画布或整个 body）进入和退出全屏模式。注意：该操作必须由用户手势（如点击、按键）触发，不能自动执行，否则会被浏览器拒绝。
如何进入全屏
调用目标元素的 requestFullscreen() 方法即可尝试进入全屏。现代浏览器基本支持，但需注意兼容性前缀（旧版 Chrome/Safari 用 webkitRequestFullscreen，Firefox 早期用 mozRequestFullScreen）。
- 推荐写法：使用
Element.requestFullscreen()（标准方法），并做简单错误处理 - 只能对 document 中已挂载的元素调用，且该元素需满足“可全屏”条件（例如不是 iframe 内嵌页，除非设置了
allowfullscreen） - 常见目标：常用
document.documentElement（即 html> 元素）来让整个页面进入全屏
示例代码：
function enterFullscreen() {
const elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
// 绑定到按钮点击
document.getElementById('fs-btn').addEventListener('click', enterFullscreen);
如何检测是否处于全屏状态
通过 document.fullscreenElement 判断：若为非 null，表示当前有元素处于全屏；值为实际全屏的 DOM 元素。
立即学习“Java免费学习笔记（深入）”；
-
document.fullscreenElement === null表示未全屏 - 也可监听
fullscreenchange事件，响应式更新 UI（如切换“退出全屏”按钮文字） - 注意：该属性名在部分旧浏览器中带前缀，如
webkitIsFullScreen、mozFullScreenElement，但现代开发中优先使用标准属性
如何退出全屏
调用 document.exitFullscreen() 即可退出当前全屏状态。同样需兼容旧版本：
- 标准方法：
document.exitFullscreen() - 旧版 Chrome/Safari：
document.webkitExitFullscreen() - 旧版 Firefox：
document.mozCancelFullScreen() - 旧版 IE/Edge：
document.msExitFullscreen()
示例：
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
注意事项与最佳实践
全屏 API 受安全策略限制较多，实际使用中需留意：
- 必须由用户主动触发（如 click、touchend），脚本直接调用会抛出
TypeError - 移动端支持有限：iOS Safari 不支持除
- 全屏时页面缩放、滚动、焦点行为可能变化，建议配合
fullscreenchange更新样式或逻辑 - 退出全屏后，
document.fullscreenElement变为null，可借此清理状态
