iframe 本身不能全屏，需由父容器调用 requestfullscreen() 并配合 css 拉伸；跨域 iframe 必须设置 allow="fullscreen"，且父页面需响应 postmessage 在用户手势中触发全屏。

iframe 元素本身不能直接 requestFullscreen()

调用 iframe.requestFullscreen() 会直接失败，因为浏览器禁止 iframe 自身全屏——它不是“可全屏元素”，requestFullscreen() 只接受 、<div>、<code><video></video> 等常规 DOM 元素。你看到的“iframe 全屏”，其实是让 iframe 的**父容器**（比如一个 <div>）全屏，再把 iframe 拉满这个容器。 <h3>真正生效的全屏路径：父容器 + CSS 拉伸</h3> <p>必须分两步走，缺一不可：</p> <ul><li>父容器（如 <code><div id="iframe-wrapper">）调用 <code>requestFullscreen()，且该调用必须在用户点击等手势中触发

全屏后，用 CSS 把 iframe 宽高设为 100%，并确保父容器无 padding/margin、iframe 无 border、html/body 高度为 100%

若父页面有其他内容（导航栏、侧边栏），需在进入全屏时用 JS 隐藏它们，否则会遮挡或挤压 iframe

常见错误：只写 iframe { width: 100%; height: 100%; } 却没让父容器真正全屏，结果 iframe 还是被限制在原区域里。

跨域 iframe 必须加 allow="fullscreen"

如果 iframe 的 src 是跨域地址（比如 https://widget.example.com），光写 allowfullscreen 不够，必须显式写成：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

<iframe src="https://widget.example.com" allow="fullscreen"></iframe>

否则 Chrome 120+ 会静默拒绝，连 NotAllowedError 都不抛。还要注意：

• 父页面响应头不能含 Permissions-Policy: fullscreen 'none'，否则 HTML 属性会被覆盖
• 如果 iframe 带 sandbox 属性，必须包含 allow-scripts，否则子页面 JS 根本执行不了，更别说触发全屏
• iOS Safari 只允许 <video></video> 或带 allow="fullscreen" 的 iframe 全屏；普通 div 包裹的 iframe 在 iOS 上无效

iframe 内部想控制父页面全屏？用 postMessage

当按钮在 iframe 子页面里，而全屏逻辑必须由父页面执行时，不能直接调父页面函数（跨域限制）。正确做法是：

• 子页面监听按钮点击，发消息：window.parent.postMessage({ type: 'ENTER_FULLSCREEN' }, '*')
• 父页面监听 message 事件，收到后立即在事件回调里调用 document.getElementById('wrapper').requestFullscreen()
• 必须在 message 回调内调用，才能满足“用户手势”要求；不能用 setTimeout 或 Promise.then 包一层，否则报 NotAllowedError

最容易被忽略的是：全屏后 iframe 内容可能因父容器尺寸突变而错位或滚动条消失，建议在 fullscreenchange 事件里同步重设 iframe 的 height 或触发布局重排。