本地双击打开HTML时iframe加载被阻止，因浏览器禁用file://协议跨文件访问；须通过HTTP服务（如localhost）运行，或用postMessage跨域通信，禁用直接DOM访问。
iframe 加载本地 HTML 文件被浏览器阻止
直接用 <iframe src="page.html"></iframe> 在本地双击打开时空白，控制台报 Not allowed to load local resource —— 这是现代浏览器对 file:// 协议的主动拦截，不是你代码写错了。
常见错误现象：页面显示为空白或灰色方块，开发者工具里 Network 标签页看不到请求，Console 显示安全策略拒绝加载。
- 只有通过 HTTP 服务（比如
http://localhost:8080）才能正常加载同域 HTML -
file://下 iframe 的src被视为跨源资源，即使文件在同一个文件夹也不行 - Chrome、Edge 默认禁用；Firefox 稍宽松但新版也逐步收紧
- 临时绕过（不推荐）：启动 Chrome 时加
--allow-file-access-from-files参数，但仅限调试，且新版已逐步失效
iframe 内容加载后无法访问 DOM（跨域限制）
就算 iframe 成功显示了，用 JavaScript 想读取它的 document 或绑定点击事件，大概率遇到 Blocked a frame with origin "null" from accessing a cross-origin frame。
使用场景：想动态修改子页面内容、监听子页面按钮点击、获取子页面表单值。
立即学习“前端免费学习笔记（深入）”；
- 只要父页和 iframe 的协议、域名、端口有任何一项不同，就触发跨域限制
-
file://和http://localhost视为不同源；http://a.com和https://a.com也是不同源 - 解决方案只有两个：统一部署到同一服务下，或双方配合用
window.postMessage通信 - 别试
iframe.contentDocument或iframe.contentWindow.document—— 只要跨域，一律报错
HTML 文件本身没被正确解析（MIME 类型或编码问题）
iframe 显示出乱码、标签未渲染、或只看到原始 HTML 文本，大概率是服务端返回了错误的 Content-Type 或编码声明不匹配。
使用场景：用 Python http.server、Node.js express.static 或 Nginx 托管时出现。
- 确保服务器返回
Content-Type: text/html; charset=utf-8，而不是text/plain或空 - HTML 文件开头要有
<meta charset="utf-8">，且文件实际保存编码确实是 UTF-8（无 BOM） - 某些轻量服务器（如 Python 3.7+ 的
http.server）默认对.html返回正确类型，但对.htm或无后缀文件可能出错 - 用浏览器开发者工具的
Network→ 点开 iframe 请求 → 查看Response Headers确认类型
Vue/React 等框架里动态插入 iframe 渲染失败
在 v-html 或 dangerouslySetInnerHTML 里拼接 <iframe src="..."></iframe>，结果根本没渲染出来，或者控制台警告 Unsafe attempt to initiate navigation。
原因很直接：框架会过滤或忽略 iframe 标签，尤其当 src 是相对路径或未声明 sandbox 属性时。
- Vue 3 的
v-html默认不执行 iframe，React 的dangerouslySetInnerHTML也不触发加载 - 正确做法是用原生
<iframe></iframe>标签 + 响应式src绑定，比如 Vue 中<iframe :src="url"></iframe> - 如果
src是 blob URL 或 data URL，需确保它符合框架的安全策略（例如 Vue 3 需要显式标记为可信） - 部分构建工具（Vite、Webpack Dev Server）对
public/目录外的路径做代理限制，src路径要写对
真正卡住人的地方，往往不是语法写错，而是搞不清当前运行环境——是双击打开？本地服务？还是部署后线上访问？每种环境的权限模型完全不同。先确认你的 iframe 请求到底发出去没有，再查控制台报什么错，比反复改 src 路径有用得多。
