直接用requestFullscreen()可触发全屏，但必须由用户点击等手势同步调用，目标元素须在DOM中且可见；否则静默失败或报NotAllowedError。需用document.fullscreenElement判断状态，监听fullscreenchange事件响应切换，并先判空再调用exitFullscreen()确保安全。
直接用 requestFullscreen() 就能触发，但必须由用户点击等手势触发，且目标元素得在 DOM 里可见；否则静默失败或报 NotAllowedError。
怎么写一个能用的全屏切换按钮
按钮本身只是个触发器，真正干活的是目标容器（比如 <div id="app"> 或 <video>）的 requestFullscreen() 方法。别对 document.body 或 document.documentElement 直接调用——Safari 会拒绝。
- 绑定
click事件，不能放在setTimeout、load回调或异步加载完成钩子里 - 优先用
click，移动端避免只依赖touchend，iOS Safari 对手势识别更严 - 调用后必须
.catch()捕获错误，常见e.name === 'NotAllowedError'表示触发条件不满足 - 示例：
const container = document.getElementById('app');<br>button.addEventListener('click', () => {<br> container.requestFullscreen()<br> .catch(e => console.error('全屏失败:', e.name));<br>});
如何判断当前是不是全屏状态
document.fullscreenElement 是唯一可靠依据：它返回当前被全屏的 DOM 元素，退出后是 null（不是 undefined，也不是布尔值）。别自己维护开关变量，也别用不存在的 document.isFullscreen。
- 监听
fullscreenchange事件，它只在document上有效 - 事件不带参数，得靠读
document.fullscreenElement判断谁在全屏 - Safari 触发
fullscreenchange稍滞后，读取状态前可加queueMicrotask避免误判 - 示例：
function handleFullscreenChange() {<br> if (document.fullscreenElement === container) {<br> button.textContent = '退出全屏';<br> } else {<br> button.textContent = '全屏显示';<br> }<br>}<br>document.addEventListener('fullscreenchange', handleFullscreenChange);
退出全屏为什么总报错？
document.exitFullscreen() 只在有全屏元素时才有效，如果当前根本没全屏却调用，会抛出 NotFoundError。这不是异常中断，但会进 catch，所以必须先判空再调。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：先检查
document.fullscreenElement是否存在，再调用exitFullscreen() - 退出操作同样必须由用户手势触发（比如按钮点击），不能自动执行
- 兼容旧浏览器需补前缀：
document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen - 示例：
button.addEventListener('click', () => {<br> if (document.fullscreenElement) {<br> document.exitFullscreen()<br> .catch(e => console.error('退出失败:', e.name));<br> }<br>});
全屏 API 看似简单，但每个环节都卡在“用户手势”和“元素可见性”上；F11 全屏无法被脚本检测，:fullscreen 伪类只对 API 全屏生效——这些边界情况容易漏掉。
