按教程实现HTML嵌入HTML失败，求本地运行解决方案

为什么直接打开main.html时嵌入内容不显示？ #

核心原因是浏览器的同源策略限制：当你直接用file://协议打开本地HTML文件时，浏览器出于安全考虑，会阻止JavaScript发起的AJAX请求（也就是你参考教程写的include.js里，大概率用了XMLHttpRequest或fetch去加载include_this.html）。file://协议下的跨域请求被默认禁止，导致无法获取到嵌入的HTML片段。

可行的解决方法 #

1. 用本地HTTP服务器运行文件（推荐） #

把文件放到本地HTTP服务器里访问，协议变为http://localhost后就不会触发同源限制：

• 若有Python：在文件目录打开终端，执行python -m http.server 8000（Python3）或python -m SimpleHTTPServer 8000（Python2），随后在浏览器访问http://localhost:8000/main.html。
• 若有Node.js：先全局安装http-server（npm install -g http-server），再在文件目录执行http-server，按终端提示的地址访问即可。

2. 改用无需AJAX的直接嵌入方式 #

如果只是简单嵌入HTML片段，不需要动态加载逻辑，可以用以下标签直接实现：

• iframe标签：

<iframe src="include_this.html" frameborder="0" style="width:100%; border:none;"></iframe>

注意：iframe会创建独立的文档上下文，样式和脚本不会与主页面共享，需要单独处理。

• object标签：

<object data="include_this.html" style="width:100%; border:none;"></object>

这种方式会把嵌入的HTML整合到主页面DOM中，样式和脚本可与主页面共享（部分浏览器可能存在兼容差异）。

3. 静态构建时合并HTML片段 #

如果是静态项目，可以用构建工具（比如Vite、Webpack）在打包阶段将include_this.html的内容直接合并到main.html里，生成最终的单文件，部署后直接打开也不会有问题。比如用Vite时，可借助vite-plugin-html插件实现HTML片段注入。

4. 修改浏览器安全设置（不推荐） #

仅用于本地临时测试：修改浏览器启动参数，允许file://协议下的AJAX请求。比如Chrome，右键点击快捷方式，在目标栏末尾添加 --allow-file-access-from-files（注意前面有空格），重启浏览器后打开文件即可。这种方法会降低浏览器安全性，不建议日常使用。

内容的提问来源于stack exchange，提问作者user171780