本地 iframe 加载 html 文件必须用 file:// 协议加绝对路径，如 file:///c:/project/index.html；相对路径无效，chrome/edge 默认禁止跨 file:// 加载，推荐用 http-server 等本地服务替代。
iframe src 本地文件路径必须用 file:// 协议
直接写 src="index.html" 或 src="./pages/demo.html" 在浏览器中会失败，因为现代浏览器出于安全限制，禁止 iframe 以 file:// 页面为上下文加载同目录下的其他本地 HTML 文件——除非显式使用 file:// 协议并提供完整绝对路径。
常见错误现象：Failed to load resource: net::ERR_FILE_NOT_FOUND 或空白 iframe，控制台无报错但内容不渲染。
- Windows 下正确写法示例：
src="file:///C:/project/index.html"（注意是三个斜杠，盘符后跟冒号） - macOS / Linux 下：
src="file:///Users/you/project/index.html"（开头三个斜杠，路径从根开始） - 相对路径一律无效——
src="demo.html"、src="../a.html"都不会被解析为本地文件系统路径
Chrome 和 Edge 默认禁用 file:// 跨文件加载
即使路径语法正确，Chrome、Edge 等基于 Chromium 的浏览器默认阻止 file:// 页面中 iframe 加载其他 file:// 资源，这是出于同源策略的强化限制（两个 file:// URL 被视为不同源）。
- 临时解决：启动 Chrome 时加参数
--allow-file-access-from-files（仅开发调试用，不可用于交付） - 更稳妥做法：用本地 HTTP 服务替代，例如
npx http-server或 VS Code 的 Live Server 插件，此时路径可写src="/pages/demo.html" - Firefox 相对宽松，部分版本允许同目录下
file://iframe 加载，但行为不一致，不应依赖
src 值里不能有中文、空格或特殊字符
哪怕路径绝对且协议正确，只要路径中含中文、空格、括号等，file:// URL 就会解析失败，iframe 显示为空白或报错 net::ERR_UNKNOWN_URL_SCHEME。
- 必须对路径做 URI 编码：比如
C:/我的项目/demo.html要写成file:///C:/%E6%88%91%E7%9A%84%E9%A1%B9%E7%9B%AE/demo.html - 推荐做法：路径全用英文+数字+下划线，避免编码出错；可用 Node.js 的
encodeURI()或在线工具辅助转换 - 注意：
encodeURIComponent()会编码斜杠，不能用；必须用encodeURI()，它只编码路径中的非 ASCII 字符和保留字符（如空格→%20），保留/和:
iframe 加载本地 HTML 后 JS/CSS 可能失效
被嵌入的本地 HTML 若自身引用了相对路径的 <script></script> 或 <link>，这些资源仍按其自身所在目录解析，而不是父页面目录——容易出现 404 或样式丢失。
- 检查子页面中所有相对路径是否仍有效，例如
<script src="lib/jquery.js"></script>要确保该路径相对于子页面位置存在 - 若子页面依赖父页面上下文（如共享全局变量），不行——iframe 是独立执行环境，
window.parent访问受同源策略限制，file://之间无法跨 iframe 通信 - 调试技巧：右键 iframe → “检查” → 切到 Elements 面板，看 iframe 内部是否成功加载了 document，再点开子页面源码确认 script 标签是否报 404
file:// 限制最省事的方式就是起一个本地服务器。路径写法简单、资源加载可靠、JS 交互正常——别在“怎么写路径”上卡住，先跑通 http://localhost:8080 这条路。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
