在开发网页时，使用iframe嵌入本地文件却返回404是常见问题。这通常涉及浏览器安全机制和路径解析方式，而非文件真的缺失。只有弄清楚底层规则，才能有效排查。
为什么iframe加载本地文件会404
浏览器对本地文件访问有安全限制。当你用file协议打开页面，iframe的src若使用相对路径，浏览器会基于当前页面路径解析。若路径计算错误，就会请求不存在的地址。另外，部分浏览器禁止file协议页面嵌套其他本地文件，以防信息泄露。
常见错误写法
- 页面在file:///Users/test/a.html，iframe写src="b.html"，但b.html实际在子目录
- 使用绝对本地路径file:///C:/test/b.html，但浏览器拦截了跨目录访问
- 将网页放到服务器后，仍用file协议路径导致解析失败
路径解析的基本规则
iframe的src解析依赖基URL。若页面通过http服务访问，基URL是服务器根或当前目录；若用file协议，基URL是文件所在目录。可用<base>标签修改基路径，但要谨慎。
通过代码查看解析结果
// 假设当前页面URL为 http://ipipp.com/demo/index.html
var iframe = document.createElement('iframe');
iframe.src = 'pages/local.html'; // 相对路径
// 浏览器会解析为 http://ipipp.com/demo/pages/local.html
console.log('最终请求地址:', new URL(iframe.src, document.baseURI).href);
可行的解决方案
使用本地服务器
推荐通过http服务运行页面，避免file协议限制。可用简单命令启动：
# 在项目目录执行，启动8000端口静态服务 python -m http.server 8000
之后页面访问http://127.0.0.1:8000/index.html，iframe用相对路径即可正常加载。
确认文件真实位置
用表格梳理路径关系：
| 页面位置 | iframe写法 | 实际解析 |
|---|---|---|
| http://127.0.0.1:8000/a.html | src="test/b.html" | http://127.0.0.1:8000/test/b.html |
| file:///home/user/a.html | src="b.html" | file:///home/user/b.html |
检查浏览器安全设置
某些浏览器默认禁止file协议嵌套。可改用http服务，或在开发时关闭相关拦截，但勿用于生产。
核心思路：404多是路径或协议问题，先用开发者工具查看Network面板中的真实请求地址，再对照文件位置修正。
理解浏览器安全与路径解析，iframe本地文件404便能轻松解决。