iframe嵌入本地HTML页面提示无法加载本地资源如何解决？

该报错是浏览器的安全沙箱限制导致的：为了避免恶意页面窃取用户本地隐私文件，浏览器默认禁止使用file://协议打开的HTML页面加载其他本地资源，哪怕路径正确也会被拦截。

方案1：改用相对路径（仅部分场景可用） #

如果index.html和embed.html存放在同一个本地目录下，直接把iframe的src属性值改为相对路径即可：

<iframe src="embed.html" style="position:absolute; top:0px; left:0px; 
width:100%; height:100%; border: none; overflow: hidden;"></iframe>

如果修改后直接双击打开index.html还是触发报错，就用下面的方案2。

方案2：启动本地静态web服务器（通用稳定方案） #

本地开发web项目时统一用http协议访问，就不会触发本地资源加载限制，有多个简单实现方式：

• 如果你用VS Code编辑器，直接安装Live Server插件，右键点击index.html选择「Open with Live Server」，编辑器会自动启动本地服务器并打开页面，iframe可以正常加载。
• 如果你本地有Python3环境，在两个页面所在的目录下打开终端，执行命令：python -m http.server，随后在浏览器访问http://localhost:8000即可。
• 如果你本地有Node.js环境，先全局安装http-server：npm install -g http-server，然后在页面所在目录下执行http-server，访问终端输出的本地地址即可。

内容的提问来源于stack exchange，提问作者Najwa K. Semdina