如何使用querySelector与模块替代jQuery实现HTML内容加载？

原方案回顾 #

之前你在frame.html的<head>中使用jQuery实现全局内容加载，逻辑是页面就绪后，通过元素ID匹配对应路径的HTML文件并插入：

<!--START: infopages-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('#15').load("../assets/15.html");
   $('#16').load("../assets/16.html");
   $('#17').load("../assets/17.html");
   $('#18').load("../assets/18.html");
   $('#19').load("../assets/19.html");
   $('#20').load("../assets/20.html");
});
</script>
<!--END: infopages-->

单个页面通过带对应ID的<div>引用内容：

<div id="19"></div>

原生JS实现（querySelector + 模块化） #

基础原生JS版本 #

不需要依赖jQuery，用document.querySelector和fetch就能实现相同逻辑，替代$(document).ready用DOMContentLoaded事件：

<!--START: infopages-->
<script>
document.addEventListener('DOMContentLoaded', async function() {
  // 定义ID与对应HTML文件的映射
  const contentMap = {
    '15': '../assets/15.html',
    '16': '../assets/16.html',
    '17': '../assets/17.html',
    '18': '../assets/18.html',
    '19': '../assets/19.html',
    '20': '../assets/20.html'
  };

  // 遍历映射，加载并插入内容
  for (const [id, url] of Object.entries(contentMap)) {
    const element = document.querySelector(`#${id}`);
    if (!element) continue; // 元素不存在则跳过
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`加载失败: ${url}`);
      const html = await response.text();
      element.innerHTML = html;
    } catch (err) {
      console.error(err);
      element.innerHTML = '<p>内容加载失败</p>';
    }
  }
});
</script>
<!--END: infopages-->

ES模块化版本 #

如果想拆分成模块，可将加载逻辑单独提取为JS模块：

1. 创建contentLoader.js模块文件：

// contentLoader.js
export async function loadContent(contentMap) {
  for (const [id, url] of Object.entries(contentMap)) {
    const element = document.querySelector(`#${id}`);
    if (!element) continue;
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`加载失败: ${url}`);
      const html = await response.text();
      element.innerHTML = html;
    } catch (err) {
      console.error(err);
      element.innerHTML = '<p>内容加载失败</p>';
    }
  }
}

2. 在frame.html的<head>中引入模块：

<!--START: infopages-->
<script type="module">
import { loadContent } from './contentLoader.js';

document.addEventListener('DOMContentLoaded', async () => {
  const contentMap = {
    '15': '../assets/15.html',
    '16': '../assets/16.html',
    '17': '../assets/17.html',
    '18': '../assets/18.html',
    '19': '../assets/19.html',
    '20': '../assets/20.html'
  };
  await loadContent(contentMap);
});
</script>
<!--END: infopages-->

更优实现方案：用数据属性统一管理 #

硬编码ID和路径的扩展性较差，推荐用data-*属性让HTML和JS解耦：

1. 单个页面的<div>改为：

<div class="content-container" data-src="../assets/19.html"></div>

2. 对应的JS逻辑（可放在模块中）：

// contentLoader.js
export async function loadAllContent() {
  const containers = document.querySelectorAll('.content-container');
  for (const container of containers) {
    const url = container.dataset.src;
    if (!url) continue;
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`加载失败: ${url}`);
      const html = await response.text();
      container.innerHTML = html;
    } catch (err) {
      console.error(err);
      container.innerHTML = '<p>内容加载失败</p>';
    }
  }
}

3. 在frame.html中调用：

<script type="module">
import { loadAllContent } from './contentLoader.js';
document.addEventListener('DOMContentLoaded', loadAllContent);
</script>

这种方式新增内容时，只需添加带data-src的<div>，无需修改JS代码，维护性更强。

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