在前端开发中，经常需要让某个公共模块比如导航栏、全局提示框、悬浮工具条等出现在所有html页面中，核心需求就是将一个div嵌套到所有html页面中。不同的项目架构对应不同的实现方案，下面逐一介绍常见的可行方法。
方案一：使用服务器端包含（SSI）
如果服务器支持SSI功能，可以把公共div单独写成一个html片段文件，然后在所有页面中通过包含指令引入。这种方式适合静态html站点，不需要额外的构建工具。
首先创建公共div的片段文件，命名为common_div.html，内容如下：
<div class="global-common">
<p>这是所有页面都会显示的公共div内容</p>
</div>
然后在每个html页面的对应位置添加SSI包含指令：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<!--#include virtual="common_div.html" -->
<div class="page-content">
页面独有的内容
</div>
</body>
</html>
方案二：使用模板引擎（以EJS为例）
如果项目使用Node.js作为后端，搭配EJS这类模板引擎可以很方便地实现公共模块的复用。首先创建公共div的模板片段，然后在主模板中引入，所有页面都继承主模板即可。
公共div片段partials/common.ejs：
<div class="common-module">
<span>公共模块内容</span>
</div>
主模板layout.ejs：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
<%- include('partials/common.ejs') %>
<%- body %>
</body>
</html>
其他页面只需要继承主模板，公共div就会自动嵌套到所有页面中。
方案三：使用构建工具（以Webpack为例）
如果是纯前端静态多页面项目，使用Webpack的html-webpack-plugin插件可以批量处理所有html页面，自动注入公共div。
首先创建公共div的模板文件common_template.html：
<div id="global-div">
全局公共div
</div>
然后在Webpack配置文件中设置插件，对所有html页面注入该div：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
const path = require('path');
// 获取所有html页面路径
const htmlPages = fs.readdirSync(path.resolve(__dirname, 'src/html'))
.filter(file => file.endsWith('.html'))
.map(file => path.resolve(__dirname, 'src/html', file));
module.exports = {
plugins: htmlPages.map(pagePath => {
return new HtmlWebpackPlugin({
template: pagePath,
filename: path.basename(pagePath),
inject: false,
// 自定义模板处理逻辑
templateParameters: (compilation, assets, assetTags, options) => {
const commonDiv = fs.readFileSync(path.resolve(__dirname, 'common_template.html'), 'utf8');
const originalHtml = fs.readFileSync(pagePath, 'utf8');
// 在body开头插入公共div
const newHtml = originalHtml.replace('<body>', `<body>${commonDiv}`);
return {
html: newHtml,
assets,
compilation,
options
};
}
});
})
};
方案四：使用JavaScript动态注入
如果项目是已经上线的静态页面，不方便修改每个页面的源码，可以通过在所有页面引入同一个js文件，用JavaScript动态创建div并插入到页面中。这种方式不需要修改原有html结构，适合后期追加公共模块的场景。
创建公共js文件common.js：
// 创建公共div元素
const commonDiv = document.createElement('div');
commonDiv.id = 'global-common-div';
commonDiv.innerHTML = '这是通过JS注入的公共div内容';
// 设置样式
commonDiv.style.position = 'fixed';
commonDiv.style.bottom = '20px';
commonDiv.style.right = '20px';
commonDiv.style.padding = '10px';
commonDiv.style.backgroundColor = '#f0f0f0';
commonDiv.style.border = '1px solid #ccc';
// 等待页面加载完成后插入到body开头
window.addEventListener('DOMContentLoaded', () => {
document.body.insertBefore(commonDiv, document.body.firstChild);
});
然后在所有html页面的<head>中引入这个js文件：
<script src="common.js"></script>
不同方案的选择建议
可以根据项目类型选择合适的方案：
- 静态html站点且服务器支持SSI，优先选择SSI方案，实现简单无额外依赖
- 后端使用模板引擎的项目，直接使用模板的包含功能，维护成本最低
- 纯前端多页面项目使用构建工具，适合开发阶段统一处理
- 已上线的静态页面需要追加公共模块，选择JavaScript动态注入方案，不需要修改原有页面源码
如果是在单页应用（SPA）中，只需要在根组件或者入口html的根节点下直接添加div即可，因为所有页面内容都渲染在这个根节点内，公共div会自然出现在所有路由页面中。
div嵌套html页面公共组件前端开发JavaScript修改时间：2026-07-08 05:54:29