本地静态页用jQuery加载HTML时遇XML解析错误的技术咨询

本地使用Firefox v123.0.1（64位）查看开发中的静态网页index.html，希望通过jQuery 3.7.1将其他HTML文件的内容动态加载到<div>标签中。拆分HTML文件的目的是：

• 模块化管理内容，便于维护
• 减少客户端初始加载的数据量
• 避免重复编写<div>相关代码（无需为每个<div>状态单独创建完整网页）

直接在<div>中写入内容时无任何错误，但使用jQuery加载外部HTML文件时，以下两种情况会触发XML解析错误：

• <br>这类未显式闭合的空元素（XML要求写法为<br/>）
• hidden这类未显式赋值的布尔属性（XML要求写法为hidden='true'）

需要解决三个问题：

1. 如何阻止这些错误发生？
2. 这些错误产生的原因是什么？
3. 有没有更优的方式实现原始目标？

index.html #

<!DOCTYPE html>
<html lang='en'>
  <head>
    <link rel='stylesheet' href='app.css'>
    <title>Test</title>
  </head>
  <body>
    <button onclick='updateContainer("#container-with-br", "br.html");'>
      加载包含<br>的HTML内容
    </button>
    <div id='container-with-br'>
      此HTML来自...<br>index.html
    </div>
    <!--
      XML解析错误：标签不匹配，预期为</br>。
      位置：br.html:7:3
      将<br>改为<br/>可修复此问题
    -->

    <br>

    <button onclick='updateContainer("#container-with-hidden", "hidden.html");'>
      加载包含hidden元素的HTML内容
    </button>
    <div id='container-with-hidden'>
      此HTML来自... index.html <span hidden>此内容已隐藏</span>
    </div>
    <!--
      XML解析错误：格式不正确
      位置：hidden.html:5:48
      将hidden改为hidden='true'可修复此问题
    -->

    <script src='jquery-3.7.1.js'></script>
    <script>
      function updateContainer(container, filename) {
        $(container).load(filename);
      }
    </script>
  </body>
</html>

br.html #

<!DOCTYPE html>
<html lang='en'>
  此HTML来自...<br>br.html
</html>

hidden.html #

<!DOCTYPE html>
<html lang='en'>
  此HTML来自... hidden.html <span hidden>此内容已隐藏</span>
</html>

1. 如何阻止错误发生？ #

有两种可行方案：

• 方案一：修正外部HTML的XML兼容语法
  将<br>改为<br/>，将hidden改为hidden="true"，让外部HTML符合XML严格语法要求。
• 方案二：强制以文本方式加载并插入
  替换jQuery的load方法，改用$.get指定dataType为text，直接将内容作为HTML文本插入，避免XML解析：

  function updateContainer(container, filename) {
    $.get(filename, function(data) {
      $(container).html(data);
    }, 'text');
  }
  

2. 错误产生的原因是什么？ #

• 本地打开静态HTML文件时，浏览器对AJAX请求的本地文件没有HTTP Content-Type头，Firefox会默认 fallback 到XML解析模式。
• XML语法要求严格：空元素必须显式闭合，布尔属性必须指定值；而HTML5允许省略空元素的闭合标签、布尔属性无需赋值，直接写属性名即可。
• jQuery的load方法未指定dataType时，会自动推断类型，本地文件无响应头的情况下会被识别为XML，触发严格的XML解析，因此不符合XML语法的HTML代码会报错。

3. 更优的实现方式？ #

推荐以下几种方案：

• 使用原生Fetch API替代jQuery
  无需依赖jQuery，代码更轻量，可控性更强：

  async function updateContainer(container, filename) {
    const response = await fetch(filename);
    const html = await response.text();
    document.querySelector(container).innerHTML = html;
  }
  

• 简化模块HTML为纯内容片段
  去掉模块文件中的<!DOCTYPE html>和<html>标签，只保留需要插入的内容（比如br.html只保留此HTML来自...<br>br.html），避免嵌套完整HTML结构导致的潜在问题。
• 使用前端构建工具做模块化拆分
  开发时用ES模块或框架组件（如Vue/React组件）拆分内容，通过Vite、Webpack等工具构建，实现生产环境的按需加载，更适合长期维护的项目。

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