子目录中Navbar HTML加载异常：样式与脚本无法正常生效

目录结构 #

A
|_B
| |_C
| | |_D

文件位置 #

navbar.html、style.css和导航栏对应的main.js均存放于目录A中。

正常运行场景 #

目录A内的index.html及其他HTML文件，使用以下代码可正常加载导航栏：

<div id="nav-placeholder"></div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
    $.get("navigation.html", function(data){
        $("#nav-placeholder").replaceWith(data);
    });
</script>

出现的问题 #

给目录D中的HTML文件添加导航栏时，将路径修改为../../../navigation.html，代码如下：

<div id="nav-placeholder"></div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
    $.get("../../../navigation.html", function(data){
        $("#nav-placeholder").replaceWith(data);
    });
</script>

这段代码成功加载了导航栏的HTML结构，但对应的CSS样式和JS交互完全不生效。

尝试过的无效方案 #

使用Tabnine提供的单独引入资源方案，问题仍未解决，代码如下：

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
    $.get("../../../navigation.html", function(data){
        $("#nav-placeholder").replaceWith(data);

        // 尝试单独添加CSS和JS文件
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = '../../../style.css';
        document.getElementsByTagName('head')[0].appendChild(link);
                
        var script = document.createElement('script');
        script.src = '../../../main.js';
        document.getElementsByTagName('body')[0].appendChild(script);
     });
</script>

可行解决方案 #

1. 改用根相对路径（推荐） #

把所有资源引用改为基于网站根目录的路径，彻底避免层级路径出错的问题：

• 在navbar.html中，将style.css和main.js的引用改为根路径：

<!-- navbar.html 内的资源引用 -->
<link rel="stylesheet" href="/style.css">
<script src="/main.js"></script>
<!-- 导航栏HTML结构 -->

• 在目录D的HTML文件中，加载导航栏的路径也改为根路径：

<div id="nav-placeholder"></div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
    $.get("/navigation.html", function(data){
        $("#nav-placeholder").replaceWith(data);
    });
</script>

2. 校验资源路径正确性 #

打开浏览器开发者工具的「网络」标签，查看style.css和main.js的请求状态：如果返回404，说明../../../style.css这类相对路径写错了，重新核对文件层级修正即可。

3. 确保JS执行时机匹配 #

如果main.js中的代码依赖导航栏DOM元素，需在导航栏插入后再执行JS：

// 修改脚本加载逻辑，添加onload回调
var script = document.createElement('script');
script.src = '../../../main.js';
script.onload = function() {
    // 若main.js内有导航栏初始化函数，在此调用
    // 例如：initNavigation();
};
document.body.appendChild(script);

4. 清除浏览器缓存 #

浏览器可能缓存了旧资源导致新代码不生效，按Ctrl+Shift+R强制刷新页面，或在开发者工具中勾选「禁用缓存」选项后重新加载。

内容的提问来源于stack exchange，提问作者Ezekiel Angelo Castulo