绝大多数情况是浏览器策略阻止非用户手势触发：必须在click、keydown等可信用户事件中直接调用，不可置于settimeout、promise.then或异步回调内；同时需确保元素已挂载dom且非隐藏状态。
为什么 requestFullscreen 调用后没反应？
绝大多数情况不是代码写错了，而是浏览器策略阻止了非用户手势触发的全屏请求。Chrome、Firefox、Safari 都要求必须在 click、keydown（且有按键输入）等明确由用户发起的事件回调中调用 requestFullscreen，否则直接静默失败或抛出 TypeError: Document not active 或 SecurityError。
常见错误现象：element.requestFullscreen() 返回 Promise 但既不 resolve 也不 reject，控制台也无报错——这通常是被策略拦截的典型表现。
- 确保调用发生在用户事件处理器内，比如
button.addEventListener('click', () => el.requestFullscreen()) - 不要在
setTimeout、Promise.then、fetch回调里直接调；如必须延后，可先保存元素引用，在下一次用户点击时再触发 - 检查元素是否已挂载到 DOM 且未被
display: none或visibility: hidden隐藏
如何兼容不同浏览器的全屏 API？
早期各浏览器前缀不同，现在虽已标准化为 requestFullscreen，但旧版本仍需 fallback。注意：前缀方法（如 webkitRequestFullscreen）参数行为可能和标准版不一致——比如 Chrome 旧版要求传 Element.ALLOW_KEYBOARD_INPUT 才允许键盘输入，而标准版已移除此参数。
推荐写法是封装一层检测逻辑，优先用标准方法，降级到带前缀的：
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
-
document.exitFullscreen()是统一的标准退出方法，无需前缀 - 不要混用：比如用
webkitRequestFullscreen进入，再用document.exitFullscreen()退出，这是安全的；但不要用document.webkitExitFullscreen()（已废弃） - IE11 只支持
msRequestFullscreen，且只接受<video></video>和<iframe></iframe>等少数元素
如何监听全屏状态变化并响应？
不能靠轮询 document.fullscreenElement，应该监听 fullscreenchange 事件。注意该事件触发在 document 上，而非进入全屏的元素本身。
另外，fullscreenerror 事件可用于捕获失败原因（如被策略拒绝、元素不可全屏等），但部分浏览器（如 Safari）对 error 事件支持较弱，建议配合 Promise 的 .catch() 使用：
el.requestFullscreen()
.catch(err => console.error('Fullscreen failed:', err));
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
console.log('Now fullscreen:', document.fullscreenElement);
} else {
console.log('Exited fullscreen');
}
});
-
document.fullscreenElement返回当前全屏的元素，为null表示未全屏 - 状态变更事件不会冒泡，只能监听
document - 移动端（尤其是 iOS Safari）基本不支持任意元素全屏，仅
<video></video>可触发原生全屏播放器
哪些元素不能调用 requestFullscreen？
不是所有 DOM 元素都允许全屏。浏览器会根据安全策略和实现限制拒绝某些情况：
-
<iframe></iframe>默认禁止，除非设置了allow="fullscreen"属性（如<iframe src="..." allow="fullscreen"></iframe>） - 处于 sandbox 模式的
<iframe></iframe>必须显式包含allow-fullscreentoken -
display: contents或position: fixed的元素在部分浏览器中可能被拒绝 - Shadow DOM 内部的元素需通过
shadowRoot.host或向上找到可全屏的 light-DOM 父元素 - 禁用的表单控件（
disabled）、contenteditable=false元素通常也不被允许
真正容易被忽略的是 iframe 的 allow 属性缺失——它不像 CSP 那样报错明显，而是直接让 requestFullscreen 静默失败。
