根本原因是浏览器安全策略强制拦截：iframe必须显式声明allow="fullscreen"、全屏须由用户手势触发、跨域时父页无法代理调用；且全屏状态归属子文档，父页document.fullscreenelement恒为null，需通过postmessage协同管理。
iframe 全屏请求为什么总失败？
根本原因不是代码写错了，而是浏览器拒绝执行——requestFullscreen() 被静默拦截或抛出 DOMException: Document not active。这不是 bug，是规范强制行为。
常见触发条件有三个，缺一不可：
-
iframe必须带allow="fullscreen"属性，否则 Chrome/Firefox 直接无视调用 - 全屏必须由用户手势触发（如
click、keydown），不能在load、setTimeout或父页按钮点击后 proxy 调用子页方法 - 若
iframe是跨域的，allow="fullscreen"仅授权“允许子页自己发起全屏”，父页无法代为调用，也不能通过contentWindow访问其document
错误写法示例：<iframe src="child.html"></iframe> —— 缺 allow，必失败；正确写法：<iframe src="child.html" allow="fullscreen"></iframe>
父页面 document.fullscreenElement 为什么总是 null？
因为全屏状态不跨 browsing context。子页调用 document.documentElement.requestFullscreen() 后，全屏归属的是子文档（child.html 的 document），父页的 document.fullscreenElement 永远不会指向该 iframe 元素，也不会变成非 null。
这导致两个关键事实：
- 父页无法靠轮询
document.fullscreenElement === iframeEl来判断子页是否全屏 - 父页调用
iframeEl.requestFullscreen()是无效的——该 API 只对<video></video>、<canvas></canvas>等可全屏元素生效，<iframe></iframe>不在此列 - 真正的全屏入口只能在子页内部，且必须由子页主动通知父页
所以父页要感知状态，唯一可靠方式是监听子页发来的 postMessage，例如子页在进入全屏后发送：window.parent.postMessage({ type: 'fullscreen-enter' }, '*')
跨域 iframe 全屏时如何同步滚动与样式？
全屏后，父页默认会继续响应滚轮/触摸事件，造成视觉撕裂或意外滚动。而浏览器不会自动禁用父页滚动，也不提供 scroll-lock 继承机制。
必须手动协同处理：
- 子页进入全屏后，立即通过
postMessage通知父页：“我要全屏了”，父页收到后执行document.body.style.overflow = 'hidden' - 子页退出全屏（监听
document.addEventListener('fullscreenchange', ...)）后，再通知父页恢复滚动：document.body.style.overflow = '' - 父页监听
message时，必须校验event.origin，不能只依赖allow-same-origin（它对跨域无效） - 不要依赖
iframe的scrolling="no"，它只影响 iframe 自身滚动条，不影响父页视口行为
容易被忽略的一点：安卓 WebView 和旧版 Safari 对 iframe 内部全屏支持极差，常 fallback 为缩放而非真正全屏，需提前 UA 判断并降级提示
为什么不能靠 sandbox="allow-scripts allow-same-origin" 解决通信问题？
加了这两个 token 并不等于能自由通信。首先，allow-same-origin 在跨域 iframe 中被浏览器静默忽略，加了也白加；其次，即使同源，sandbox 仍强制隔离 DOM 访问——子页脚本依然无法读取 window.parent.document 或调用父页函数。
真正可控的通信路径只有一条：postMessage + 显式状态托管。所有敏感操作（如权限提交、用户登出）必须由父页发起网络请求，子页只负责收集参数和 UI 渲染。
沙箱 iframe 的 localStorage、sessionStorage 均绑定到 nullorigin，刷新即丢。想存折叠状态或筛选条件？必须由父页统一托管，子页仅通过 postMessage 上报变更。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
