如何在JavaScript中链接不同目录的HTML文件？现有相对路径代码失效

首先，你仅定义路径变量但未执行实际的加载/嵌入操作，这是代码无效的核心原因。结合你的需求，提供几种可行方案：

1. 先验证路径正确性 #

直接在浏览器地址栏中拼接这个相对路径（从index.html所在页面的地址出发），确认能否正常打开traffic_switch.html：

• 检查../的数量是否匹配目录层级，比如index.html在a/b/c/目录下，要回到根目录需要3个../，若目标文件在根目录的traffic_switch文件夹下，路径才正确。
• 打开浏览器F12的Network面板，查看加载请求状态，若显示404，说明路径层级错误，需调整../的数量。

2. 使用Fetch API加载并嵌入HTML内容 #

如果需要把目标HTML的内容整合到index.html的DOM中，用Fetch API实现：

// 确认路径正确后定义
const targetPath = "../../../traffic_switch/traffic_switch.html";
// 提前在index.html中准备容器：<div id="function-container"></div>
const container = document.getElementById('function-container');

// 加载并插入HTML内容
fetch(targetPath)
  .then(res => {
    if (!res.ok) throw new Error(`请求失败：${res.status}`);
    return res.text();
  })
  .then(htmlContent => {
    container.innerHTML = htmlContent;
    // 处理目标HTML中的脚本（若存在）
    container.querySelectorAll('script').forEach(oldScript => {
      const newScript = document.createElement('script');
      // 复制原脚本的属性与内容
      Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
      newScript.textContent = oldScript.textContent;
      oldScript.replaceWith(newScript);
    });
  })
  .catch(err => console.error('加载失败：', err));

3. 使用iframe快速嵌入独立页面 #

如果不需要整合DOM，仅需在index.html中展示目标页面的功能，iframe实现更简单：

const targetPath = "../../../traffic_switch/traffic_switch.html";
const iframe = document.createElement('iframe');
iframe.src = targetPath;
// 按需设置样式
iframe.style.width = '100%';
iframe.style.height = '80vh';
iframe.style.border = 'none';
// 插入到页面指定位置，比如body末尾
document.body.appendChild(iframe);

注意事项 #

• 本地测试时，尽量用本地服务器（如VS Code的Live Server插件、Python的python -m http.server）运行，避免file://协议下的跨域限制导致Fetch请求失败。
• 若目标HTML依赖自身目录下的CSS/JS文件，其相对路径会基于index.html的位置，可能需要调整为绝对路径，或在加载后修正资源路径。

内容的提问来源于stack exchange，提问作者yi ting yang