如何使用JavaScript导入外部HTML模块实现无刷新加载页面内容

架构老林

2026-9-29

实现方案

方案1：原生Fetch API实现（无额外依赖，适合新手）

这是目前兼容性最好、逻辑最简单的实现方式，无需引入第三方库，核心逻辑是点击菜单项时请求对应HTML文件，将内容插入当前页指定容器即可。

步骤1：准备页面结构

<!-- 导航菜单 -->
<div class="menu">
  <button class="menu-item" data-page="results">results</button>
  <button class="menu-item" data-page="analysis">analysis</button>
</div>
<!-- 内容展示容器，所有外部加载的HTML会插入到此处 -->
<div id="content-container"></div>

步骤2：编写JavaScript逻辑（写在main.js中即可）

const menuItems = document.querySelectorAll('.menu-item')
const contentContainer = document.getElementById('content-container')

menuItems.forEach(item => {
  item.addEventListener('click', async () => {
    // 获取当前菜单对应的HTML文件名
    const pageName = item.dataset.page
    const pagePath = `./${pageName}.html`

    try {
      const res = await fetch(pagePath)
      if (!res.ok) throw new Error('资源请求失败')
      const htmlContent = await res.text()
      contentContainer.innerHTML = htmlContent
    } catch (error) {
      contentContainer.innerHTML = `<p>内容加载失败：${error.message}</p>`
    }
  })
})

注意事项

不能直接双击打开HTML文件运行，本地文件协议会拦截Fetch请求，可安装VS Code的Live Server插件启动本地服务后调试
需确保results.html、analysis.html的存放路径和代码中pagePath的配置一致，若存放在子目录下可修改为./子目录名/${pageName}.html
若加载的HTML中包含独立JS逻辑，可将对应脚本写在各自的HTML文件末尾即可正常执行