Fullscreen API 允许网页元素进入系统级全屏，需用户手势触发；通过 document.fullscreenElement、fullscreenEnabled 等属性和事件检测状态；调用 requestFullscreen()（含兼容写法）进入，document.exitFullscreen() 退出，并支持样式适配与 iframe/移动端注意事项。
在 JavaScript 中，BOM 提供的 Fullscreen API 允许网页中任意元素（如 <div>、<video>、<canvas> 等）进入浏览器原生全屏模式，提升沉浸式体验。它不是让整个页面“最大化窗口”，而是调用系统级全屏（类似视频播放器的全屏按钮），需用户主动触发（如点击），且必须在用户手势（click/tap）事件处理函数中调用，否则会被浏览器拒绝。
判断和检测全屏状态
浏览器通过一系列全局属性和事件来反映当前全屏状态：
-
document.fullscreenElement：返回当前处于全屏状态的 DOM 元素，
null表示未全屏； -
document.fullscreenEnabled：布尔值，表示当前文档是否允许进入全屏（例如 iframe 未设置
allowfullscreen时为false）； -
document.onfullscreenchange：全屏状态切换时触发（进入或退出），推荐用
addEventListener('fullscreenchange', ...)； - document.onfullscreenerror：调用失败时触发（如权限被拒、非用户手势调用），建议监听并提示用户。
请求元素进入全屏（带兼容写法）
现代浏览器统一支持 element.requestFullscreen()，但旧版 Chrome/Safari/Edge 曾使用带前缀的方法。可封装一个兼容函数：
function launchFullscreen(element) {
if (!document.fullscreenEnabled) {
console.warn('Fullscreen API is not available');
return;
}
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); // Safari
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen(); // IE11
}
}
⚠️ 注意：必须在用户交互回调中调用，例如：
立即学习“Java免费学习笔记（深入）”；
const btn = document.getElementById('fs-btn');
const target = document.getElementById('my-section');
btn.addEventListener('click', () => {
launchFullscreen(target);
});
退出全屏与切换逻辑
退出全屏不针对某个元素，而是全局操作：
- document.exitFullscreen()：退出当前全屏状态；
- 可结合
document.fullscreenElement判断当前状态，实现“切换”效果：
function toggleFullscreen(element) {
if (!document.fullscreenElement) {
launchFullscreen(element);
} else {
document.exitFullscreen();
}
}
// 绑定到按钮
btn.addEventListener('click', () => {
toggleFullscreen(target);
});
样式适配与注意事项
进入全屏后，浏览器会自动为全屏元素及其祖先添加伪类：:fullscreen（标准）或 ::-webkit-full-screen（旧 Safari）等。可用于定制全屏样式：
#my-section:fullscreen {
background: #000;
z-index: 9999;
}
#my-section:-webkit-full-screen {
background: #000;
}
其他关键点：
- iframe 需显式添加
allowfullscreen属性才能在其内部调用全屏； - 移动端（尤其是 iOS Safari）对全屏支持有限，
<video>全屏通常由原生控件接管，自定义元素全屏可能无效； - 退出全屏后，焦点可能丢失，必要时手动恢复（如
element.focus()）； - 不要依赖全屏尺寸做核心布局，应配合
resize事件监听视口变化。
