allowfullscreen 是唯一启用 iframe 全屏的合法属性，必须显式声明；跨域时需通过 fullscreenchange 事件判断状态；全屏请求须由 iframe 内用户手势触发，父页面不可代劳。

allowfullscreen 属性必须显式声明，且不能写成 allow="fullscreen"

浏览器默认禁止 iframe 内容触发全屏，allowfullscreen 是唯一有效的开启方式。它是个无值布尔属性，写成 allowfullscreen="true" 也合法，但 allow="fullscreen" 是错的——这是 sandbox 属性的语法，对全屏权限完全无效。常见错误是把两者混淆，导致 DevTools 里看到属性存在，实际却没生效。

验证是否真正启用：在 Chrome Elements 面板中右键 iframe → “Inspect iframe” → 切到右侧 “Permissions” 标签页，确认 fullscreen 显示为 “Allowed”。仅靠 HTML 里写了属性，不代表策略已落地。

跨域 iframe 下 contentWindow.document.fullscreenEnabled 总是 undefined

同源时你可以直接读取 document.querySelector('iframe').contentWindow.document.fullscreenEnabled；但只要跨域，这个访问就会被同源策略拦截，返回 undefined 或抛出 SecurityError。此时别硬查子页面状态，改用父页面监听 fullscreenchange 事件 + 检查 document.fullscreenElement 是否等于该 iframe 元素本身：

• document.addEventListener('fullscreenchange', () => { if (document.fullscreenElement === document.getElementById('myIframe')) { /* 真正进入全屏 */ } });

这是唯一可靠的跨域全屏状态判断方式。

全屏请求必须由 iframe 内部的用户手势触发

哪怕父页面和 iframe 都配好了 allowfullscreen，且同源，如果用父页面按钮调用 iframe.contentWindow.requestFullscreen()，现代浏览器（Chrome 90+、Firefox 88+）会直接拒绝，控制台报 Uncaught (in promise) TypeError: fullscreen error。

正确做法只有两种：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 子页面自己提供一个按钮，点击时调用 element.requestFullscreen()（比如子页面里一个 div 或 canvas）
• 父页面通过 postMessage 发送指令，子页面收到后，在自己的 click handler 里执行 requestFullscreen —— 注意不能异步延迟，必须紧贴用户操作上下文

这个限制不是 bug，而是浏览器强制的 UX 安全策略：防止恶意页面静默劫持用户屏幕。

screenfull.js 等封装库不改变底层权限模型

screenfull 只是对 requestFullscreen 的 polyfill 和事件包装，它不会绕过 allowfullscreen 检查，也不会突破跨域限制。如果你用它操作 iframe 内容失败，问题一定出在权限配置或触发时机上，而不是库本身。

调试时直接跳过库，用原生 API 测试更高效：

• 先确认 iframe 有 allowfullscreen
• 再确认子页面里某个元素能成功调用 .requestFullscreen()
• 最后才把逻辑交给 screenfull

最容易被忽略的点：全屏入口必须在 iframe 自身 DOM 内完成交互闭环，父页面只能协调，不能代劳。

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