iframe内元素requestFullscreen()需满足三条件：iframe带allow="fullscreen"属性、调用在用户手势中（如click）、目标元素可见；跨域需用postMessage通信，退出全屏也须iframe自行调用。
iframe 里的元素无法直接调用 requestFullscreen() 全屏到整个视口，除非满足严格条件——最关键是：iframe 必须带 allow="fullscreen" 属性，且全屏调用必须由用户手势触发（如 click），否则静默失败。
为什么 iframe 内的元素 requestFullscreen() 没反应
常见现象是点击按钮后控制台无报错、Promise 不 resolve 也不 reject，页面毫无变化。根本原因有三个：
-
iframe标签缺失allow="fullscreen"属性，浏览器直接拦截全屏请求 - 调用
requestFullscreen()不在用户手势回调中（比如写在setTimeout或load事件里） - 目标元素在 iframe 内不可见（例如
display: none、visibility: hidden，或被父容器裁剪）
正确写法：iframe + allow + 用户点击 + 可见元素
假设父页嵌入 iframe，src 是同源页面 modal.html，其中有个 <div id="modal"> 想全屏：
① 父页 iframe 必须声明权限：<iframe src="modal.html" allow="fullscreen" width="100%" height="600"></iframe>
立即学习“前端免费学习笔记（深入）”；
② iframe 内部脚本必须绑定到用户事件（不能自动执行）：document.getElementById('btn').addEventListener('click', () => { document.getElementById('modal').requestFullscreen(); });
③ 全屏样式要作用于该元素本身，不是 body：#modal:fullscreen { width: 100vw; height: 100vh; margin: 0; }
并兼容旧版：#modal:-webkit-full-screen, #modal:-moz-full-screen, #modal:fullscreen { ... }
跨域 iframe 怎么办？postMessage 是唯一可行路径
如果 iframe 是跨域的（比如嵌入第三方支付弹窗），你无法直接操作其 DOM，allow="fullscreen" 仅是前提，不等于你能调用它的 requestFullscreen()。此时必须依赖跨域通信：
- iframe 内监听
message，收到特定指令（如{ type: 'enter-fullscreen' }）后，在自己的 click 回调里调用requestFullscreen() - 父页通过
iframe.contentWindow.postMessage()发送指令 - 双方需校验
event.origin防止伪造消息 - 退出全屏同样需通信：iframe 全屏后按 ESC 触发
fullscreenchange，再postMessage通知父页更新 UI
容易被忽略的关键细节
全屏状态只能以 document.fullscreenElement 为准，别维护自定义布尔变量；document.exitFullscreen() 在跨域 iframe 中无效，必须由 iframe 自己调用；Safari 对非 <video> 元素的全屏支持仍有限制，15.4+ 才允许 document.documentElement.requestFullscreen()，普通 div 建议用 position: fixed; inset: 0; 模拟全屏作为降级方案。
