HTML属性Allowfullscreen：允许Iframe内容全屏显示的权限配置-html教程-PHP中文网

加 allowfullscreen 仍报错是因为权限链断裂：跨域 iframe 需 allow="fullscreen"，permissions-policy 响应头可覆盖 html 属性，sandbox 未配 allow-scripts 会禁 js，且全屏必须由 iframe 内用户手势触发。

html属性allowfullscreen：允许iframe内容全屏显示的权限配置

不加 allowfullscreen 或 allow="fullscreen"，iframe 里的 requestFullscreen() 必然失败，且 Chrome 120+ 之后连错误提示都可能被静默吞掉。

为什么加了 `allowfullscreen` 还报错？

常见现象是控制台没报错、requestFullscreen() 返回 Promise 但一直 pending，或者直接 reject 带一句模糊的 “Fullscreen denied”。这通常不是代码写错了，而是权限链断在了更底层：

allowfullscreen 是旧式布尔属性，只对同源 iframe 有效；跨域 iframe 在 Chrome 120+ 中已被降级为仅当同时声明 allow="fullscreen" 才生效
父页面 HTTP 响应头里若设置了 Permissions-Policy: fullscreen 'none'，会直接覆盖 HTML 属性，哪怕 allow="fullscreen" 写得再全也没用
如果 iframe 同时带 sandbox 属性，但没显式加 allow-scripts，JS 根本跑不起来，自然调不了全屏 API

`allowfullscreen` 和 `allow="fullscreen"` 到底怎么选？

两者不是互斥，而是演进关系。现代项目建议双写，兼顾兼容与明确语义：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

同源 iframe：单写 allowfullscreen 足够（IE10+/Chrome15+/Firefox10+ 都认）
跨域 iframe：必须写 allow="fullscreen"，allowfullscreen 只作兼容补丁
如果你用的是 screenfull 这类库，它内部调用的是 element.requestFullscreen()，所以权限检查落在 iframe 容器上，不是落在子页面 document 上
注意拼写：allowfullscreen 是无值布尔属性，allow="fullscreen" 的值必须是字符串 "fullscreen"，不能写成 "full-screen" 或 "allow-fullscreen"

如何验证 iframe 真的拿到了全屏权限？

别只看 HTML 属性有没有写，要查浏览器实际赋予的策略：

在 Chrome DevTools 的 Elements 面板中右键 iframe 元素 → “Inspect iframe” → 查看右侧的 “Permissions” 标签页，确认 fullscreen 显示为 “Allowed”
在 Console 中执行：document.querySelector('iframe').contentWindow?.document?.fullscreenEnabled，返回 true 才算真正就绪
如果 iframe 是跨域的，contentWindow 会被同源策略屏蔽，此时只能靠父页面监听 fullscreenchange 事件 + 检查 document.fullscreenElement 是否为该 iframe 的子元素来间接判断

最容易被忽略的一点：全屏请求必须由用户手势触发，且这个手势必须发生在 iframe 内部（比如 iframe 里的按钮点击），而不是父页面某个按钮去调 iframe 里的 requestFullscreen() —— 后者在多数现代浏览器中会被拒绝，即使所有权限配置都正确。