在开发多页面静态网站或者传统后端渲染项目时，我们常常需要给所有html页面添加同一个公共的div元素，比如全局的悬浮客服按钮、顶部公告栏或者统一的页脚区域。如果手动在每个html文件里添加对应代码，不仅工作量巨大，后续修改内容时也需要逐个调整，维护成本很高。下面介绍几种可行的实现方案，开发者可以根据项目的技术栈和需求选择使用。
方案一：使用服务器端包含（SSI）
如果你的项目部署在支持SSI的服务器（比如Apache、Nginx配置开启SSI后）上，可以使用服务器端包含的方式引入公共div。这种方式是在服务器返回html页面之前，就把公共内容拼接到页面里，前端拿到的已经是完整的页面。
首先创建一个公共的div文件，比如命名为common_div.html，内容如下：
<div class="global-notice"> <p>这是所有页面都会显示的公共公告区域</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>
这种方案的优点是前端不需要额外处理，SEO友好，缺点是依赖服务器配置，纯静态本地打开时无法生效。
方案二：使用JavaScript动态注入
如果项目是纯静态页面，或者不想依赖服务器配置，可以使用JavaScript在所有页面加载完成后动态创建并插入div元素。这种方式兼容性很好，几乎所有浏览器都支持。
我们可以创建一个公共的js文件，比如common.js，内容如下：
// 等待页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 创建要嵌套的div元素
var commonDiv = document.createElement('div');
// 设置div的类名，方便样式控制
commonDiv.className = 'global-float-btn';
// 设置div的内部内容
commonDiv.innerHTML = '<span>返回顶部</span>';
// 把div插入到body的最前面
document.body.insertBefore(commonDiv, document.body.firstChild);
});
然后在所有html页面的<head>或者<body>结束前引入这个js文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<script src="common.js"></script>
</head>
<body>
<div class="page-content">
这是页面独有的内容
</div>
</body>
</html>
这种方案的优点是不需要服务器支持，纯静态页面也能使用，缺点是在js加载执行之前，页面可能不会显示这个div，对SEO不够友好。
方案三：使用iframe嵌入公共div
如果公共div的内容比较复杂，或者需要独立的样式和逻辑，也可以使用iframe的方式嵌入。首先创建包含公共div的html文件，比如common_frame.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 去掉iframe默认边距 */
body { margin: 0; padding: 0; }
.common-div { width: 100%; height: 40px; background: #f5f5f5; text-align: center; line-height: 40px; }
</style>
</head>
<body>
<div class="common-div">这是通过iframe嵌入的公共div</div>
</body>
</html>
然后在所有html页面需要的位置添加iframe标签：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
</head>
<body>
<iframe src="common_frame.html" style="width: 100%; height: 40px; border: none;"></iframe>
<div class="page-content">
这是页面独有的内容
</div>
</body>
</html>
这种方案的优点是公共div的样式和逻辑完全独立，不会和主页面冲突，缺点是iframe本身会有一些性能开销，而且样式控制相对麻烦。
方案四：前端框架公共模板配置
如果项目使用的是Vue、React等前端框架，或者使用了Webpack、Vite等构建工具，通常可以通过配置公共模板来实现。以Vite构建的纯html项目为例，我们可以修改index.html作为公共模板，所有生成的页面都会基于这个模板。
修改Vite的index.html模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>%VITE_TITLE%</title>
</head>
<body>
<div class="global-header">
<h1>所有页面公共的头部</h1>
</div>
<div id="app"></div>
</body>
</html>
这样所有通过Vite生成的html页面都会自动包含这个公共的头部div，不需要手动逐个添加。
不同方案的选择建议
我们可以根据不同的场景选择合适的方案：
- 如果项目部署在支持SSI的服务器上，优先选择SSI方案，性能和SEO都最好。
- 如果是纯静态多页面项目，没有使用构建工具，优先选择JavaScript动态注入方案，实现简单兼容性好。
- 如果公共div内容复杂、样式独立，可选择iframe方案。
- 如果项目使用了前端构建工具或者框架，优先使用框架或构建工具提供的公共模板配置，维护最方便。
div嵌套html页面公共组件JavaScriptiframe修改时间：2026-07-10 03:51:31