真正起作用的是 allow="fullscreen",而非 allowfullscreen;chrome 120+ 和新版 firefox 已将全屏权限收敛至此属性,缺失则 requestfullscreen() 静默失败。

加 allowfullscreen 不等于能全屏,真正起作用的是 allow="fullscreen" —— Chrome 120+ 和新版 Firefox 已将权限控制收敛到这个属性,旧写法只是兼容补丁。
为什么写了 allowfullscreen 还报 SecurityError?
这不是 JS 写错了,而是浏览器在入口就拦截了 requestFullscreen() 调用,连错误都可能静默吞掉。常见现象:点击按钮无反应、Promise 一直 pending、控制台安静得像没这回事。
-
allowfullscreen="true"是错的——它是布尔属性,不能带值;只写allowfullscreen即可 -
allow="full-screen"或allow="allow-fullscreen"是拼写错误——必须是精确字符串"fullscreen" - 父页面响应头含
Permissions-Policy: fullscreen 'none'会直接覆盖 HTML 属性,删响应头比改 HTML 更有效 - iframe 带
sandbox但没加allow-scripts,子页 JS 根本不执行,requestFullscreen() 压根不会被调用
跨域 iframe 全屏必须双写 allowfullscreen 和 allow="fullscreen"
同源 iframe 单写 allowfullscreen 足够,但跨域时 allowfullscreen 在现代浏览器中已失效,allow="fullscreen" 才是硬性要求。双写不冲突,且能兼顾老版本 Safari/Firefox 的兜底需求。
- 正确写法:
<iframe src="https://thirdparty.com/player.html" allowfullscreen allow="fullscreen"></iframe> - Bilibili 自定义 embed 地址若跳过首页(如直接 src="https://player.bilibili.com/player.html?..."),需手动补全这两个属性
- 自建视频页若用
video.requestFullscreen(),外层 iframe 必须满足上述条件,否则抛SecurityError: Document not allowed to call requestFullscreen()
requestFullscreen() 必须由 iframe 内用户手势触发
父页面按钮点击后调用 iframe.contentWindow.document.documentElement.requestFullscreen() 必然失败——“用户手势”上下文不会跨 browsing context 传递。
- 触发点必须在 iframe 内部:比如子页里放
<button onclick="document.getElementById('player').requestFullscreen()">全屏</button> - 不能在
iframe.onload、setTimeout或fetch().then()中调用,浏览器直接拒绝,不报错 - 目标元素必须是子页内真实挂载的 DOM 节点(如
<div id="player">),对 <code><iframe></iframe>自身调用永远无效 - 验证是否就绪:在子页控制台执行
document.fullscreenEnabled,返回true才算通过权限检查 - 别用
parent.document.fullscreenElement === iframeElm判断,这永远不成立 - 子页进入/退出全屏时,主动发
window.parent.postMessage({ type: 'FULLSCREEN_ENTERED' }, '*') - 父页监听
window.addEventListener('message', handler),根据消息更新 UI 或滚动锁 - 若 iframe 跨域,
contentWindow被同源策略屏蔽,只能靠 postMessage 通信,没有其他可靠路径
父页面如何感知 iframe 是否进入全屏?
document.fullscreenElement 在父页永远为 null,这不是 bug,是规范行为——全屏状态属于子文档(iframe.contentDocument),不会提升到父文档层级。
最容易被忽略的其实是 allow="fullscreen" 这一行——它不是“写了就生效”的装饰性属性,而是浏览器强制执行的权限白名单。少它,哪怕 allowfullscreen 和手势都对,全屏按钮也会静默失败。











