正确：Chrome 120+和新版Firefox要求必须双写allowfullscreen与allow="fullscreen"，且allow中权限项须用分号分隔、每项后跟括号来源列表，空格/逗号分隔或拼写错误均导致整条属性失效。

父页面 iframe 标签的 allow 属性写法是否正确

allowfullscreen 单独存在已不够用，Chrome 120+ 和新版 Firefox 要求必须搭配 allow="fullscreen"。常见错误包括：

• allowfullscreen="true" —— 布尔属性不接受值，现代浏览器忽略该写法
• allow="full-screen" 或 allow="allow-fullscreen" —— 拼写必须是精确字符串 fullscreen，错一个字符就失效
• allow="fullscreen; camera" —— 缺少来源列表括号，正确应为 allow="fullscreen (); camera 'self'"
• 用空格或逗号分隔权限项（如 allow="fullscreen clipboard-read"）—— 浏览器直接跳过整条属性，等同于没写

正确写法只有一种主流组合：。双写既兼容旧环境，又满足新规范语义。

父页面 HTTP 响应头是否覆盖了 HTML 权限

就算 allow="fullscreen" 写得再对，只要父页面响应头含 Permissions-Policy: fullscreen 'none'，浏览器就会直接无视 HTML 层配置。

• 打开 DevTools → Network → 找到父页面 HTML 请求 → 查看 Response Headers 中的 Permissions-Policy
• 若存在 fullscreen=() 或 fullscreen 'none'，需修改服务端配置或 Nginx/CDN 规则，而非改前端代码
• 跨域 iframe 场景下，父页头还必须显式放行目标源，例如：Permissions-Policy: fullscreen=(self "https://widget.example.net")

iframe 是否带 sandbox 且缺失 scripts 权限

如果 iframe 同时声明了 sandbox 属性，子页面 JS 默认被禁用，requestFullscreen() 根本不会执行。

HTML设计工具专业版

企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。

下载

• 检查 iframe 是否有 sandbox，若有，必须显式加 allow-scripts：
• sandbox 不带任何值等价于 sandbox=""，此时连 allow-scripts 都不默认开启
• 即使同源，sandbox 下无 allow-scripts，子页 JS 无法运行，自然无法触发全屏

父页面能否访问 iframe.contentWindow 判断就绪状态

跨域 iframe 下，iframe.contentWindow 是受限对象，直接读取 document.fullscreenEnabled 会报 SecurityError；同源则可验证，但仍有陷阱。

• 同源时，可在 iframe.onload 后尝试：iframe.contentWindow.document.fullscreenEnabled —— 返回 false 表示权限未生效
• 跨域时，父页无法读取子文档状态，唯一可靠方式是子页主动发 postMessage({ type: 'fullscreen-check-ready' })，父页监听并响应
• 别依赖 document.fullscreenElement === iframeElm 判断子页是否全屏 —— 这永远为 false，因为全屏状态只属于子文档

真正卡点往往不在 JS 调用本身，而在父页的 HTML 属性、HTTP 头、sandbox 策略这三层配置的任意一处断裂。逐层确认比反复调试 requestFullscreen() 更有效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！