JS文件无法向HTML插入导航栏元素，Github Pages部署后不显示

云上老周

2026-10-3

问题原因

路径引用错误：fetch('navbar.html')的相对路径是基于当前访问的HTML页面所在目录计算，而非navbar.js文件所在目录。当你在子目录的HTML文件中调用脚本时，浏览器会尝试请求子目录下的navbar.html而非根目录的文件，请求失败后自然无法插入导航栏内容。
无错误捕获逻辑：原代码没有添加错误处理，请求失败或者DOM操作出错时没有明显提示，无法快速定位问题。
可选的执行时机问题：如果你的<script>标签放在<head>中，脚本执行时DOM还未解析到id为navbarJS的脚本标签，querySelector会返回null，后续替换操作直接终止。

解决方案

把fetch的路径改为站点根目录绝对路径，只要你的navbar.html放在站点根目录，不管子目录层级多深都能正确请求到
添加错误捕获逻辑，方便后续排查问题
可选：给script标签添加defer属性，确保DOM解析完成后再执行脚本

修改后的navbar.js代码如下：

// 路径前面加/表示从站点根目录开始查找，不用关心当前页面在哪一级目录
fetch('/navbar.html')
  .then(res => {
    if (!res.ok) {
      throw new Error(`请求navbar.html失败，状态码：${res.status}`);
    }
    return res.text();
  })
  .then(text => {
    const oldelem = document.querySelector("script#navbarJS");
    // 先判断元素是否存在再操作，避免报错
    if (oldelem) {
      const newelem = document.createElement("div");
      newelem.innerHTML = text;
      oldelem.parentNode.replaceChild(newelem, oldelem);
    } else {
      console.error('未找到id为navbarJS的script标签');
    }
  })
  .catch(err => {
    // 出错会在浏览器控制台打印错误信息，方便排查
    console.error('导航栏加载失败：', err);
  })