本文介绍一种无需后端、不依赖 PHP 的纯前端方案，通过动态构造绝对路径解决 jQuery .load() 在子目录页面中因相对路径失效导致页头页脚无法加载的问题，确保 header.js 可全局复用。
本文介绍一种无需后端、不依赖 php 的纯前端方案，通过动态构造绝对路径解决 jquery `.load()` 在子目录页面中因相对路径失效导致页头页头页脚无法加载的问题，确保 `header.js` 可全局复用。
在静态网站开发中，为实现页眉（header.html）和页脚（footer.html）的跨页面复用，开发者常借助 jQuery 的 .load() 方法异步加载 HTML 片段。但直接使用相对路径（如 "header.html"）会导致路径解析失败——当 HTML 页面位于子目录（例如 /blog/article.html 或 /about/index.html）时，浏览器会以当前页面 URL 为基准查找资源，从而尝试请求 /blog/header.html 或 /about/header.html，而非项目根目录下的 /header.html，最终加载失败。
根本原因在于：.load() 中的路径是相对于当前页面 URL的，而非 JavaScript 文件位置或项目结构。因此，硬编码 "../header.html" 或 "../../header.html" 不仅破坏可维护性，更违背“一次编写、处处引用”的复用初衷。
✅ 推荐解决方案：基于 window.location.origin 构造绝对路径
将 header.js 中的代码优化如下：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$(function() {
const baseUrl = window.location.origin; // 例如：http://localhost:5500 或 https://example.com
$("#header").load(`${baseUrl}/header.html`);
$("#footer").load(`${baseUrl}/footer.html`);
});? 关键说明：
- window.location.origin 返回协议 + 域名 + 端口（如 http://localhost:5500），不包含路径部分，因此始终指向站点根；
- 所有页面（无论位于 /、/blog/ 还是 /admin/settings/）执行该 JS 时，都会生成形如 http://localhost:5500/header.html 的完整 URL，确保资源定位准确；
- header.html 和 footer.html 必须放置在 Web 服务器的根目录下（即与 index.html 同级），这是该方案的前提。
? 进阶优化（支持开发与生产环境无缝切换）：
若你使用 VS Code Live Server（默认端口 5500），或未来部署到真实域名，以下写法更具鲁棒性：
$(function() {
// 获取根路径（含协议和域名，不含路径）
const origin = window.location.origin;
// 可选：添加基础路径前缀（如部署在子目录 /my-site/ 下）
// const basePath = '/my-site'; // 部署时取消注释并修改
const headerPath = `${origin}/header.html`;
const footerPath = `${origin}/footer.html`;
$("#header").load(headerPath, function(response, status, xhr) {
if (status === "error") {
console.error("页眉加载失败:", xhr.status, xhr.statusText);
$("#header").html("<header class='error'>[页眉加载失败]</header>");
}
});
$("#footer").load(footerPath, function(response, status, xhr) {
if (status === "error") {
console.error("页脚加载失败:", xhr.status, xhr.statusText);
$("#footer").html("<footer class='error'>[页脚加载失败]</footer>");
}
});
});⚠️ 注意事项：
- 此方案依赖浏览器同源策略：header.html 和 footer.html 必须与主页面同域（开发时需通过 HTTP 服务访问，不可直接双击打开 file:// 协议页面，否则会触发 CORS 错误）；
- 推荐使用 VS Code 插件 Live Server 或 npx http-server 启动本地服务，确保 http://localhost:xxx/ 访问；
- 若未来需部署至子路径（如 https://example.com/my-project/），可在 origin 后拼接固定路径前缀（见注释示例），但需保持 HTML 文件实际存放位置与路径一致。
总结：通过 window.location.origin 动态生成绝对 URL，既规避了相对路径的层级陷阱，又完全避免后端介入，真正实现了单个 header.js 全局复用、零配置适配任意目录深度的静态页面架构。
