使用W3Schools include-html仅加载一个片段，如何让两个都启动加载？

你遇到的问题大概率是修改W3Schools的include脚本时，破坏了原有的递归处理逻辑，或者属性名修改不彻底导致的。

核心原因 #

原版W3Schools的脚本通过递归调用来逐个处理带include属性的元素：找到第一个符合条件的元素，发送AJAX请求加载内容，请求完成后删除该元素的include属性，再递归调用函数处理下一个元素。如果修改属性名时没有同步更新脚本中所有相关的属性引用，或者删掉了递归调用，就会导致只处理第一个元素，后续元素被忽略。

解决步骤 #

1. 检查并修正脚本 #

确保脚本中所有涉及属性名的部分都和你HTML中使用的属性名一致（比如你改成了data-include-html，就统一用这个名称），并且保留递归逻辑。以下是修正后的示例脚本：

function includeHTML() {
  var elements, targetEl, filePath, xhr;
  // 筛选所有带自定义include属性的元素
  elements = document.querySelectorAll('[data-include-html]');
  if (elements.length === 0) return;

  targetEl = elements[0];
  filePath = targetEl.getAttribute('data-include-html');

  xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status === 200) {
        targetEl.innerHTML = this.responseText;
      } else if (this.status === 404) {
        targetEl.innerHTML = '片段文件未找到';
      }
      // 删除属性，避免重复处理
      targetEl.removeAttribute('data-include-html');
      // 递归处理下一个元素
      includeHTML();
    }
  };
  xhr.open('GET', filePath, true);
  xhr.send();
}

// 页面加载完成后执行
window.onload = includeHTML;

如果更喜欢现代的Fetch API，也可以用并行加载的方式（无需递归，效率更高）：

async function includeHTML() {
  const includeElements = document.querySelectorAll('[data-include-html]');
  
  await Promise.all(Array.from(includeElements).map(async (el) => {
    const url = el.getAttribute('data-include-html');
    try {
      const res = await fetch(url);
      el.innerHTML = res.ok ? await res.text() : '片段加载失败';
    } catch (err) {
      el.innerHTML = `加载错误：${err.message}`;
    }
    el.removeAttribute('data-include-html');
  }));
}

window.onload = includeHTML;

2. 验证HTML结构 #

确保你的HTML中引用片段的元素属性名和脚本一致，比如：

<header>
  <div data-include-html="header.html"></div>
</header>

<main>
  <!-- 页面主体内容 -->
</main>

<footer>
  <div data-include-html="footer.html"></div>
</footer>

3. 排查其他可能问题 #

• 路径错误：检查header.html和footer.html的路径是否和index.html处于同一目录，或者路径引用正确（比如子目录用./parts/header.html）。
• 本地文件限制：如果直接用file://协议打开HTML，部分浏览器会阻止AJAX请求，建议用本地服务器（比如VS Code的Live Server插件）运行页面。
• 控制台报错：打开浏览器开发者工具的控制台，查看是否有404（文件找不到）或JS语法错误，这些都会导致加载失败。

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