如何在HTML文档中引入另一个HTML文件？游戏嵌入异常求助

服务器端包含（SSI） #

如果你的部署服务器支持SSI（如Apache、Nginx），可以直接在主HTML里用SSI指令引入外部游戏HTML。服务器会在返回页面时自动把外部内容合并进主页面，最终用户看到的源码里会直接包含游戏HTML，同时游戏脚本能正常初始化运行。

示例代码：

<!-- 主页面文件 -->
<div id="ht-content">
  <!--#include virtual="game-content.html" -->
</div>

注意需要开启服务器的SSI支持：Apache需启用mod_include模块，Nginx要在配置中添加ssi on;。

构建工具预合并（推荐前端项目使用） #

用前端构建工具（如Vite、Webpack、Gulp）在开发或构建阶段，把外部游戏HTML直接合并到主页面中。最终生成的主页面会包含完整的游戏内容，源码可见，且能避免动态加载带来的脚本执行时机问题。

Vite示例： #

在主HTML里用模板语法读取外部文件内容：

<!-- 主页面 index.html -->
<div id="ht-content">
  <%= fs.readFileSync('./game-content.html', 'utf-8') %>
</div>

然后在Vite配置文件中开启EJS模板支持，构建后生成的页面会自动合并game-content.html的内容。

Webpack示例： #

借助html-loader实现引入，先安装依赖，然后在主HTML中写入：

<!-- 主页面 index.html -->
<div id="ht-content">
  ${require('./game-content.html')}
</div>

在Webpack配置中配置html-loader的相关选项，构建时会自动将外部HTML内容插入到对应位置。

为什么之前的jQuery方案失效？ #

你用$.get动态加载HTML时，游戏相关的脚本可能会因为DOM元素加载时机晚于游戏初始化逻辑，或者动态插入的脚本执行上下文异常，导致游戏无法正常启动。而上面的静态合并方案，页面加载时游戏的DOM和脚本就已存在，能保证初始化流程正常运行。

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