如何将拆分后的HTML内容文件关联到main.html以完整显示？

以下是几种能让浏览器加载main.html时自动拼接拆分出的part1.txt至part7.txt内容的方案，按需选择：

1. JavaScript动态加载（通用兼容所有浏览器） #

这是最稳妥的方案，无需依赖服务器配置，纯前端实现：

• 在main.html中原来对应每个片段的位置，添加占位容器，比如：

  <div id="part1-container"></div>
  <div id="part2-container"></div>
  <!-- 以此类推到part7-container -->
  

• 在main.html的末尾（</body>标签前）添加一段JS代码，负责加载并插入片段内容：

  // 定义加载函数
  async function loadPart(containerId, filePath) {
    try {
      const response = await fetch(filePath);
      const content = await response.text();
      document.getElementById(containerId).innerHTML = content;
    } catch (error) {
      console.error(`加载${filePath}失败:`, error);
    }
  }
  
  // 批量加载所有片段
  const parts = [
    {id: 'part1-container', path: 'part1.txt'},
    {id: 'part2-container', path: 'part2.txt'},
    // 补充part3到part7的对应关系
    {id: 'part7-container', path: 'part7.txt'}
  ];
  
  parts.forEach(part => loadPart(part.id, part.path));
  

• 注意：要确保main.html和所有part*.txt文件在同一目录下，或者调整path为正确的相对路径。

2. 服务器端包含（SSI，适合有后端服务器的场景） #

如果你的页面部署在Apache、Nginx等服务器上，可以用服务器端直接拼接内容，浏览器拿到的是完整HTML：

• Apache服务器：先确保开启了mod_include模块，然后在main.html对应位置添加指令：

  <!--#include virtual="part1.txt" -->
  <!--#include virtual="part2.txt" -->
  <!-- 以此类推到part7.txt -->
  

  同时要将main.html的后缀改为.shtml，或者在Apache配置中让.html文件支持SSI解析。
• Nginx服务器：在配置文件中开启SSI（ssi on;），然后同样在main.html中添加：

  <!--#include virtual="/part1.txt" -->
  

  路径根据实际部署结构调整。

3. HTML5原生<include>元素（注意兼容性） #

部分现代浏览器支持原生的<include>元素，用法简单但兼容性有限（目前Chrome、Edge支持，Firefox需开启实验性特性）：

• 在main.html对应位置直接写：

  <include src="part1.txt"></include>
  <include src="part2.txt"></include>
  <!-- 以此类推到part7.txt -->
  

  这种方式无需额外代码，但如果要兼容所有浏览器，还是推荐用JavaScript方案。

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