在 HTML 页面中引入公共部分的代码

在前端开发中，导航栏、侧边栏和页脚往往是全站通用的。如果每个页面都复制一遍这些代码，一旦需要修改某个菜单项，就必须手动更新成百上千个 HTML 文件。

为了解决这个问题，我们可以采用 “组件化” 的思想：将重复部分提取为独立文件，在运行时动态加载。

一、核心步骤#

1. 提取公共 HTML 片段#

将重复的 HTML 结构保存为独立文件（通常存放在 common/ 或 com/ 目录下）。

head.html (顶部导航示例)

1
<div class="header-main">
2
    <div class="user-profile">
3
        <span>欢迎您，王婷 (Admin)</span>
4
        <button id="logout-btn">退出登录</button>
5
    </div>
6
</div>

side.html (侧边栏菜单示例)

1
<div class="sidebar-container">
2
    <ul id="menu">
3
        <li><a href="index.html"><i class="fa fa-home"></i> 首页</a></li>
4
        <li><a href="users.html"><i class="fa fa-user"></i> 用户管理</a></li>
5
    </ul>
6
</div>

2. 在主页面中预留占位符#

在需要插入公共代码的地方，放置一个带有唯一 id 的容器。

3. 使用 jQuery 动态注入#

通过 jQuery 的 .load() 方法，将外部 HTML 的内容填充到占位符中。

test.html (完整示例)

1
<!DOCTYPE HTML>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>后台管理系统</title>
6
    <link href="css/style.css" rel="stylesheet">
7
    <script src="js/jquery-3.6.0.min.js"></script>
8
</head>
9
<body>
10
    <div class="main-layout">
11
        <div id="header-placeholder"></div>
12

13
        <div class="content-wrapper">
14
            <h1>欢迎进入控制台</h1>
15
        </div>
16

17
        <div id="sidebar-placeholder"></div>
18
    </div>
19

20
    <script>
21
        $(function() {
22
            // 加载头部
23
            $("#header-placeholder").load("com/head.html", function() {
24
                console.log("头部加载完成");
25
            });
26
            // 加载侧边栏
27
            $("#sidebar-placeholder").load("com/side.html");
28
        });
29
    </script>
30
</body>
31
</html>

二、运行原理与注意事项#

跨域限制 (CORS)：由于 .load() 使用了 AJAX 技术，如果你直接双击 HTML 文件（地址栏显示 file:///...）在浏览器打开，通常会因为安全策略导致加载失败。必须在本地服务器（如 Live Server, Nginx, Apache）环境下运行。
异步加载： .load() 是异步的。如果你需要给加载进来的按钮绑定事件，必须在回调函数中执行，或者使用事件委托：

1
// 正确方案：事件委托
2
$(document).on("click", "#logout-btn", function() {
3
    alert("执行退出逻辑");
4
});

样式与脚本：公共片段 HTML 不需要包含 <html>, <head>, <body> 标签，直接写业务结构即可。

三、 2026 年的进阶方案建议#

虽然 jQuery 方案简单好用，但随着技术演进，你可以考虑以下替代方案：

轻量级场景：使用原生 JavaScript 的 fetch() 和 innerHTML 实现，摆脱对 jQuery 的依赖。
工程化场景：使用 Vite 或 Webpack。它们支持在构建阶段将 HTML 片段合并（HTML Inlining），用户访问时不需要发起额外的网络请求。
组件化场景：如果项目变得复杂，直接转向 Vue 或 React，它们天生支持组件复用。

总结#

通过 jQuery.load() 引入公共部分，我们实现了 “一处修改，处处生效”。对于中小型静态项目或者传统的后台管理模板，这依然是一个极具性价比的解决方案。

一、 核心步骤#