jQuery多页面加载页眉页脚失败/路径错误问题求助

下面给你几个无需后端、纯前端的解决方案，都能保证JS文件的复用性：

方案1：使用绝对路径加载模板（最稳妥） #

直接基于网站根地址拼接模板路径，不管当前页面在哪个目录，都能正确指向根目录下的header.html和footer.html：

$(function(){
    const rootUrl = window.location.origin;
    $("#header").load(rootUrl + "/header.html");
    $("#footer").load(rootUrl + "/footer.html");
})

window.location.origin会自动获取当前网站的根地址（比如本地开发时的http://localhost:5500），拼接后路径对所有页面都生效。

方案2：动态生成适配层级的相对路径 #

通过解析当前页面的URL层级，自动计算需要的../前缀，适配不同深度的子目录：

$(function(){
    // 计算当前页面相对于根目录的层级深度
    const pathSegments = window.location.pathname.split('/');
    // 根目录页面的层级为0，子目录页面层级为对应目录数
    const depth = pathSegments.length - 2;
    // 生成对应数量的../前缀
    const relativePrefix = '../'.repeat(depth);
    
    $("#header").load(relativePrefix + "header.html");
    $("#footer").load(relativePrefix + "footer.html");
})

比如根目录的index.html会用空前缀，子目录/blog/detail.html会自动生成../前缀，完美适配所有页面。

方案3：用HTML 标签统一基准路径 #

在所有页面的<head>中添加<base>标签，指定所有相对路径的基准为根目录：

<base href="/">

之后你的原始jQuery代码不需要任何修改，所有相对路径都会自动以根目录为起点解析，子目录页面也能正常加载根目录下的模板。

注意：添加<base>后，页面内其他相对路径（比如图片、CSS、JS文件）也会以根目录为基准，要确保这些资源的路径是正确的。

方案4：原生JS实现（不依赖jQuery） #

如果不想用jQuery，用原生JS的fetch API也能实现同样的效果，代码更轻量化：

document.addEventListener('DOMContentLoaded', async () => {
    const rootUrl = window.location.origin;
    
    // 加载页眉
    const headerResp = await fetch(rootUrl + '/header.html');
    document.getElementById('header').innerHTML = await headerResp.text();
    
    // 加载页脚
    const footerResp = await fetch(rootUrl + '/footer.html');
    document.getElementById('footer').innerHTML = await footerResp.text();
});

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