在HTML5页面开发中，经常需要将多个独立的子页面整合到同一个主页面中，形成统一的框架结构。常见的实现方式有两种，分别是使用iframe标签直接嵌入，以及用div容器配合动态加载逻辑嵌入子页面，两种方式各有适用场景。
一、使用iframe设置框架嵌入子页面
iframe是HTML原生支持的标签，可以直接在当前页面中嵌入另一个完整的HTML页面，不需要额外的JavaScript逻辑即可实现基础嵌入功能。
1. 基础用法
iframe的核心属性是src，用来指定要嵌入的子页面地址，同时可以通过width、height设置框架的尺寸，通过frameborder设置边框样式。
<!-- 主页面代码 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>iframe框架示例</title>
<style>
.main-container {
width: 100%;
height: 100vh;
}
.top-frame {
width: 100%;
height: 150px;
}
.bottom-frame {
width: 100%;
height: calc(100vh - 150px);
}
</style>
</head>
<body>
<div class="main-container">
<!-- 嵌入顶部导航子页面 -->
<iframe class="top-frame" src="nav.html" frameborder="0"></iframe>
<!-- 嵌入主体内容子页面 -->
<iframe class="bottom-frame" src="content.html" frameborder="0"></iframe>
</div>
</body>
</html>
2. 常用可选属性
除了基础属性外，iframe还有一些实用的可选属性，可以根据需求配置：
scrolling：设置是否显示滚动条，可选值为yes、no、autoallowfullscreen：设置是否允许子页面全屏显示sandbox：设置子页面的安全限制，比如禁止执行脚本、禁止提交表单等
3. 注意事项
使用iframe时需要注意，不同域名下的子页面会受到同源策略限制，无法直接通过JavaScript操作子页面或父页面的DOM。如果是同域名下的子页面，可以通过contentWindow属性获取子页面的window对象，实现父子页面通信。
// 父页面中获取同域名下的iframe子页面window对象
const iframe = document.querySelector('iframe');
const childWindow = iframe.contentWindow;
// 调用子页面的全局函数
childWindow.childFunction();
二、使用div配合动态加载设置框架结构
如果不需要嵌入完整的独立HTML页面，只是需要将子页面的内容片段整合到主页面中，可以使用div作为容器，通过JavaScript动态加载子页面内容，这种方式更灵活，也更容易控制样式。
1. 基础实现逻辑
核心思路是通过fetch或者XMLHttpRequest请求子页面的内容，然后将获取到的HTML片段插入到指定的div容器中。
<!-- 主页面代码 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>div动态加载示例</title>
<style>
.header {
height: 100px;
background-color: #f0f0f0;
}
.content {
height: calc(100vh - 100px);
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="header" id="headerContainer"></div>
<div class="content" id="contentContainer"></div>
<script>
// 加载顶部导航内容到header容器
fetch('nav-part.html')
.then(response => response.text())
.then(html => {
document.getElementById('headerContainer').innerHTML = html;
});
// 加载主体内容到content容器
fetch('content-part.html')
.then(response => response.text())
.then(html => {
document.getElementById('contentContainer').innerHTML = html;
});
</script>
</body>
</html>
2. 子页面内容要求
这种方式的子页面不需要完整的HTML结构，只需要提供需要嵌入的HTML片段即可，比如nav-part.html的内容可以是：
<!-- nav-part.html 内容 -->
<ul class="nav-list">
<li>首页</li>
<li>列表页</li>
<li>详情页</li>
</ul>
3. 优缺点对比
和iframe方式相比，div动态加载的优点是样式更容易统一，不会出现框架边框、滚动条冲突等问题，也更容易实现响应式布局；缺点是如果子页面包含独立的脚本和样式，需要额外处理避免冲突，同时无法实现子页面的独立刷新。
三、两种方式的适用场景
可以根据实际需求选择对应的方案：
| 场景 | 推荐方案 |
|---|---|
| 需要嵌入完全独立的第三方页面，或者子页面需要独立运行、刷新 | iframe |
| 子页面是自身项目的模块片段，需要统一样式、整合到主页面逻辑中 | div动态加载 |
| 需要严格控制页面安全，限制子页面的权限 | iframe（配合sandbox属性） |
| 需要实现复杂的响应式布局，子页面内容需要和主页面联动 | div动态加载 |
在实际开发中，也可以两种方式结合使用，比如主框架用div布局，部分独立模块用iframe嵌入，兼顾灵活性和独立性。