JavaScript触发全屏需在用户手势（如click）中调用document.documentElement.requestFullscreen()，并处理Promise返回值；非手势上下文、iframe缺失allow="fullscreen"、Safari限制等均会导致“Not allowed”或“Document not focused”错误。
如何用 JavaScript 触发全屏模式（requestFullscreen）
网页无法全屏，大概率是没走标准的 requestFullscreen 流程，或者被浏览器策略拦截了。现代浏览器只允许在用户手势（如 click、touchend）触发的上下文中调用该方法，直接在 setTimeout 或加载完成时调用会静默失败。
实操要点：
-
requestFullscreen()是挂载在 DOM 元素上的方法，最常用的是document.documentElement（即整个页面根元素），也可以作用于某个<video></video>或<div> <li>必须处理 Promise 返回值：成功时 resolve，失败时 reject（比如用户拒绝、非手势触发、已处于全屏等），不加 <code>.catch()很难发现为什么没反应 - 部分旧版浏览器需加前缀：
webkitRequestFullscreen（Chrome/Safari）、msRequestFullscreen（IE11），但当前可忽略 IE，仅需兼容 Safari 15.4+ 的webkitEnterFullscreen（仅对<video></video>有效）
button.addEventListener('click', () => {
document.documentElement.requestFullscreen()
.catch(err => console.error('全屏请求失败:', err));
});
为什么 requestFullscreen 报错 “Document not focused” 或 “Not allowed to use fullscreen”
这两个错误本质都是权限/上下文问题，不是代码写错了。前者多见于 iframe 嵌套场景且父页面未聚焦；后者几乎全是因调用不在用户手势响应链中——比如绑在 input 的 change 事件里，或通过 postMessage 异步转发后调用。
关键判断点：
立即学习“Java免费学习笔记（深入）”；
- 检查调用栈是否能追溯到
click、keydown（按 Enter）、touchend等原生用户事件，中间不能断开（比如不能在fetch().then()里调） - 若在 iframe 中使用，需确保 iframe 有
allow="fullscreen"属性：<iframe src="..." allow="fullscreen"></iframe> - Safari 对
document.documentElement全屏限制更严，可降级尝试document.body.requestFullscreen()（效果一致，兼容性略好）
退出全屏与监听状态变化（fullscreenchange 和 exitFullscreen）
用户可能手动按 ESC 退出，或调用 API 退出，所以不能只依赖“自己调用成功就认为在全屏”。必须监听 fullscreenchange 事件，并用 document.fullscreenElement 判断当前状态。
注意细节：
-
exitFullscreen()是document方法，不是元素方法；它返回 Promise，也需.catch() -
fullscreenchange事件没有事件参数说明进入/退出，只能靠document.fullscreenElement === null判断是否退出 - 不要在事件回调里重复调用
requestFullscreen，容易触发循环或报错 “Already in fullscreen”
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
console.log('已退出全屏');
}
});
// 安全退出
if (document.fullscreenElement) {
document.exitFullscreen().catch(e => console.warn(e));
}
移动端适配和 <video></video> 的特殊行为
Android Chrome 和 iOS Safari 对全屏的理解不同：Chrome 允许任意元素全屏，Safari 几乎只认 <video></video>，且调用的是 webkitEnterFullscreen()（非标准），而 requestFullscreen() 在 video 上会触发原生播放器全屏（带控制栏）。
实用建议：
- 对视频组件，优先用
<video controls webkit-playsinline="false"></video>+video.webkitEnterFullscreen()（iOS）和video.requestFullscreen()（Android/桌面）双路径 - 避免在
orientationchange或resize里自动全屏——移动端不支持，且违反用户意图 - 全屏后 viewport 缩放可能异常，可在
fullscreenchange后动态重设meta[name=viewport]，但多数情况无需干预
document.fullscreenEnabled 就直接调用，或把 requestFullscreen 当同步函数用而没处理 Promise 拒绝。
