allowfullscreen是布尔属性，仅声明iframe内容可调用requestfullscreen()；现代浏览器必须同时设置allow="fullscreen"，且需满足用户手势触发、子页js启用、目标元素合法等条件，否则静默失败。
allowfullscreen 是布尔属性，不是开关按钮
写了 allowfullscreen 并不等于“开启全屏”，它只是向浏览器声明：“这个 iframe 里的内容被允许调用 requestFullscreen()”。如果 iframe 内页面自己没写 JS 调用全屏 API，或者调用时机/目标不合法，哪怕属性全对也白搭。
常见错误是把它当成功能开关，比如写成 allowfullscreen="true" —— 这是错的。它是布尔属性，只认“有没有”，不认值，正确写法就是 allowfullscreen（无等号无引号）。
现代浏览器必须同时写 allow="fullscreen"
Chrome 71+、Edge 79+、Safari 13.1+（包括 iOS Safari）已不再信任单独的 allowfullscreen，必须显式声明权限白名单：allow="fullscreen"。漏掉这一行，全屏按钮点击后静默失败，控制台甚至不报错。
实操建议：
-
allow="fullscreen"的值必须是字符串"fullscreen"，不能写成"full-screen"、"allow-fullscreen"或其他变体 - 它和
allowfullscreen不冲突，建议双写，兼顾语义与兼容 - 如果 iframe 是跨域的（比如嵌 YouTube、Bilibili），
allow="fullscreen"是强制要求，allowfullscreen只起补丁作用
iframe 全屏失败的三个隐藏拦路虎
即使 allowfullscreen 和 allow="fullscreen" 都写了，仍可能失败。最常被忽略的三类情况：
-
父页面响应头禁止：如果服务器返回了
Permissions-Policy: fullscreen 'none'，HTML 属性会被直接覆盖，全屏请求必然被拒 -
iframe 带 sandbox 但没开脚本：如
sandbox="allow-same-origin"却没加allow-scripts，子页面 JS 根本不执行，requestFullscreen()压根不会被调用 -
全屏请求不在用户手势内：iframe 内部必须由真实 click/touchend 触发，不能在
setTimeout、fetch().then或组件 mounted 后自动调用，否则静默拒绝
怎么确认 iframe 真拿到了全屏权限？
别只看 HTML 源码有没有写对，要查浏览器实际赋予的策略：
- 在 Chrome DevTools Elements 面板中右键 iframe → “Inspect iframe” → 切到右侧的 Permissions 标签页，确认
fullscreen显示为 Allowed - 若 iframe 同源，可在 Console 执行：
document.querySelector('iframe').contentWindow?.document?.fullscreenEnabled，返回true才算就绪 - 若跨域，
contentWindow被屏蔽，只能靠监听父页面的fullscreenchange事件 + 检查document.fullscreenElement是否为该 iframe 的子元素来间接判断
最容易被跳过的验证点：全屏必须由 iframe 内部的用户操作触发，父页面按钮点击后去调 iframe 里的 JS 方法，这条路在绝大多数浏览器里走不通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
