HTML中Iframe在全屏API（Fullscreen）下的权限转移配置-html教程-PHP中文网

iframe全屏必须写allow="fullscreen"，旧式allowfullscreen仅兼容；跨域时需子页内用户手势触发requestfullscreen()，父页无法直接调用；sandbox iframe还需allow-scripts权限。

html中iframe在全屏api（fullscreen）下的权限转移配置

iframe 全屏失败时，`allow="fullscreen"` 是必须写的，不是可选的

加了 allowfullscreen 还报错？那大概率是写法过时了。Chrome 120+ 和新版 Firefox 已将全屏权限控制统一收归 allow="fullscreen"，旧式布尔属性 allowfullscreen 只作兼容补丁，跨域 iframe 下它根本不起作用。

常见错误包括：

allowfullscreen="true" —— 值是多余的，布尔属性不接受值；现代浏览器只认无值写法或 allow="fullscreen"
allow="full-screen" 或 allow="allow-fullscreen" —— 拼写错误，必须是精确字符串 "fullscreen"
父页面响应头含 Permissions-Policy: fullscreen 'none' —— 它会直接覆盖 HTML 属性，连 allow="fullscreen" 都无效

正确写法只有一种主流组合：<iframe src="child.html" allow="fullscreen" allowfullscreen></iframe>。双写兼顾兼容性与语义明确性，且不冲突。

跨域 iframe 内调用 `requestFullscreen()` 必须由子页内用户手势触发

父页面按钮点击后去调 iframe.contentWindow.document.documentElement.requestFullscreen()？这在任何浏览器下都必然失败。全屏 API 的“用户手势”上下文不会跨 browsing context 传递。

实操要点：

触发点必须在 iframe 内部：比如子页里放一个 <button onclick="document.documentElement.requestFullscreen()">全屏</button>
不能在 iframe.onload、setTimeout 或 fetch().then() 中调用 —— 浏览器直接拒绝，不报错或只抛 NotAllowedError: API can only be initiated by a user gesture
若 iframe 是跨域的，contentWindow 被同源策略屏蔽，父页无法读取其 document，更无法 proxy 调用

验证是否真就绪：在子页控制台执行 document.fullscreenEnabled，返回 true 才算通过权限检查。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

`document.fullscreenElement` 在父页永远为 `null`，别指望它指向 iframe 元素

子页进入全屏后，父页面的 document.fullscreenElement 一定是 null，这不是 bug，是规范行为。因为全屏状态属于“当前激活文档”，iframe 是独立文档（browsing context），它的全屏不提升到父文档层级。

想让父页感知状态，只能靠通信：

子页进入/退出全屏时，主动发 postMessage({ type: 'fullscreen-enter' }) 给 window.parent
父页监听 message 事件，并根据消息更新 UI（如按钮文字、滚动锁定）
父页不能靠 document.fullscreenElement === iframeEl 判断 —— 这个比较永远为 false

注意：父页若想手动锁住滚动（防止全屏时还能滚背景），得在收到 fullscreen-enter 后自己设 document.body.style.overflow = 'hidden'，退出时恢复。

带 `sandbox` 的 iframe 即使加了 `allow="fullscreen"` 也可能静默失败

sandbox 属性默认锁死一切行为，包括 JS 执行。如果 iframe 同时有 sandbox，但没加 allow-scripts，那子页连 requestFullscreen() 这行代码都跑不起来，自然全屏失败，控制台还可能没报错。

排查顺序必须是：

先确认 iframe.sandbox 返回的 DOMTokenList 是否为空 —— 若为空，说明所有权限被禁，allow="fullscreen" 形同虚设
再检查是否显式加了 allow-scripts（allow-scripts 和 allow="fullscreen" 是正交权限，缺一不可）
若还用了 allow-same-origin，确保 src 真同源（协议+域名+端口完全一致），否则该 token 被忽略且不提示

生产环境嵌第三方内容时，永远不要加 allow-same-origin；最小权限原则下，sandbox="allow-scripts allow-popups allow-fullscreen" 是更安全的起点 —— 注意这里 allow-fullscreen 是旧写法，实际应统一用 allow="fullscreen"。