在前端开发中，导航栏、侧边栏和页脚往往是全站通用的。如果每个页面都复制一遍这些代码，一旦需要修改某个菜单项，就必须手动更新成百上千个 HTML 文件。
为了解决这个问题，我们可以采用 “组件化” 的思想：将重复部分提取为独立文件，在运行时动态加载。
一、 核心步骤
1. 提取公共 HTML 片段
将重复的 HTML 结构保存为独立文件（通常存放在 common/ 或 com/ 目录下）。
head.html (顶部导航示例)
<div class="header-main">
<div class="user-profile">
<span>欢迎您，王婷 (Admin)</span>
<button id="logout-btn">退出登录</button>
</div>
</div>
side.html (侧边栏菜单示例)
<div class="sidebar-container">
<ul id="menu">
<li><a href="index.html"><i class="fa fa-home"></i> 首页</a></li>
<li><a href="users.html"><i class="fa fa-user"></i> 用户管理</a></li>
</ul>
</div>
2. 在主页面中预留占位符
在需要插入公共代码的地方，放置一个带有唯一 id 的容器。
3. 使用 jQuery 动态注入
通过 jQuery 的 .load() 方法，将外部 HTML 的内容填充到占位符中。
test.html (完整示例)
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="main-layout">
<div id="header-placeholder"></div>
<div class="content-wrapper">
<h1>欢迎进入控制台</h1>
</div>
<div id="sidebar-placeholder"></div>
</div>
<script>
$(function() {
// 加载头部
$("#header-placeholder").load("com/head.html", function() {
console.log("头部加载完成");
});
// 加载侧边栏
$("#sidebar-placeholder").load("com/side.html");
});
</script>
</body>
</html>
二、 运行原理与注意事项
- 跨域限制 (CORS)：
由于
.load()使用了 AJAX 技术，如果你直接双击 HTML 文件（地址栏显示file:///...）在浏览器打开，通常会因为安全策略导致加载失败。必须在本地服务器（如 Live Server, Nginx, Apache）环境下运行。 - 异步加载：
.load()是异步的。如果你需要给加载进来的按钮绑定事件，必须在回调函数中执行，或者使用事件委托：
// 正确方案：事件委托
$(document).on("click", "#logout-btn", function() {
alert("执行退出逻辑");
});
- 样式与脚本：
公共片段 HTML 不需要包含
<html>,<head>,<body>标签，直接写业务结构即可。
三、 2026 年的进阶方案建议
虽然 jQuery 方案简单好用，但随着技术演进，你可以考虑以下替代方案：
- 轻量级场景：使用原生 JavaScript 的
fetch()和innerHTML实现，摆脱对 jQuery 的依赖。 - 工程化场景：使用 Vite 或 Webpack。它们支持在构建阶段将 HTML 片段合并（HTML Inlining），用户访问时不需要发起额外的网络请求。
- 组件化场景：如果项目变得复杂，直接转向 Vue 或 React，它们天生支持组件复用。
总结
通过 jQuery.load() 引入公共部分，我们实现了 “一处修改，处处生效”。对于中小型静态项目或者传统的后台管理模板，这依然是一个极具性价比的解决方案。