动态加载Navbar的JS/CSS线上404及fetch完成检测问题求助

一、解决线上环境CSS/JS 404错误 #

• 检查文件名大小写：多数线上服务器（如Nginx、Apache）区分文件名大小写，本地编辑器通常不区分。比如代码里的/Navbar.js，若线上实际文件是/navbar.js就会触发404，需确保路径和文件名大小写完全匹配。
• 对齐本地与线上根路径：本地开发时编辑器可能把项目文件夹作为根目录，但线上可能部署在域名子目录下（如https://xxx.com/my-project/），此时绝对路径/Navbar.js会指向域名根目录而非子目录文件。可改用相对路径（如./Navbar.js，基于当前HTML文件位置），或用document.location.origin + '/子目录路径/Navbar.js'拼接正确根路径。
• 修正无效路径：你代码里link标签的href='/wont-work'是无效测试路径，需替换为实际Navbar CSS文件路径（如/Navbar.css）。
• 规范属性写法：script标签的type属性应写为全小写的text/javascript，避免因浏览器兼容性问题引发潜在错误。

二、可靠检测fetch完成时机（替代setTimeout） #

当前代码中fetch加载Navbar HTML是异步操作，但加载JS/CSS的代码同步执行，导致JS可能先于HTML加载完成。可通过Promise.all等待所有fetch请求完成后，再执行后续加载操作，具体改造如下：

1. 改造load_file函数，让它返回Promise（替代回调）：

function load_file(filename) {
  return fetch(filename)
    .then(response => {
      if (!response.ok) {
        throw new Error(`加载失败 ${filename}: ${response.status}`);
      }
      return response.text();
    });
}

2. 改造getHTML函数，收集所有fetch请求的Promise，等待全部完成后再插入HTML并加载JS/CSS：

function getHTML() {
  const includes = document.getElementsByTagName('include');
  // 收集所有fetch请求的Promise
  const fetchPromises = Array.from(includes).map(include => {
    const src = include.attributes.src.value;
    return load_file(src).then(text => {
      include.insertAdjacentHTML('afterend', text);
      include.remove();
    });
  });

  // 等待所有Navbar HTML加载完成后，再加载对应资源
  Promise.all(fetchPromises)
    .then(() => {
      const body = document.body;
      const head = document.head;

      // 插入CSS
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = '/Navbar.css'; // 替换为实际CSS路径
      head.appendChild(link);

      // 插入JS
      const script = document.createElement('script');
      script.src = '/Navbar.js'; // 替换为实际JS路径
      script.type = 'text/javascript';
      body.appendChild(script);
    })
    .catch(err => {
      console.error('加载公共组件失败:', err);
    });
}

window.addEventListener("load", getHTML);

这种方式能确保所有Navbar HTML都加载并插入页面后，才会加载对应的JS和CSS，完全无需依赖不可靠的setTimeout延迟。

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