html5规范中已经明确废弃了传统的frameset、frame等框架标签，不再推荐使用这类技术实现页面拆分，但是仍然支持iframe内联框架标签，开发者可以通过iframe在页面中嵌入其他文档内容。不过iframe本身存在一些性能和体验上的问题，实际开发中也可以根据需求选择其他替代方案。
html5对框架技术的支持情况
传统的前端框架技术主要依赖<frameset>和<frame>标签，通过这两个标签可以将一个浏览器窗口拆分成多个独立的子窗口，每个子窗口加载不同的页面。但是在html5的规范中，这两个标签已经被正式废弃，主流浏览器虽然暂时还保留了对它们的兼容支持，但是不建议在新项目中使用，因为这类框架存在很多固有问题：比如无法被搜索引擎正常抓取、页面URL无法对应独立内容、移动端适配困难等。
而<iframe>标签属于内联框架，html5仍然保留了对它的支持，开发者可以通过该标签在当前页面中嵌入另一个完整的HTML文档，它的使用场景更加灵活，不会像传统框架那样破坏页面的整体结构。
iframe的使用方法与注意事项
基本使用语法
iframe的基础使用非常简单，只需要指定src属性为要嵌入的页面地址即可，同时可以通过width、height属性设置嵌入区域的尺寸，通过frameborder属性控制是否显示边框。
<!-- 嵌入一个外部页面，宽度800px，高度500px，无边框 --> <iframe src="https://ipipp.com/demo.html" width="800" height="500" frameborder="0" title="示例嵌入页面"> </iframe>
常用属性说明
除了基础属性外，iframe还有一些常用的配置属性，开发者可以根据需求选择使用：
- src：指定要嵌入的页面URL，必填属性
- width/height：设置iframe的宽度和高度，支持像素值和百分比
- frameborder：设置是否显示边框，0为不显示，1为显示，html5中更推荐使用CSS控制边框样式
- sandbox：开启沙箱模式，限制嵌入页面的权限，提升页面安全性，比如禁止嵌入页面执行脚本、提交表单等
- allowfullscreen：是否允许嵌入的页面开启全屏模式，常用于嵌入视频播放器场景
iframe的优缺点
iframe的优势在于使用简单，能够快速实现跨域页面嵌入，不需要额外的复杂配置，适合嵌入第三方内容比如广告、地图、视频播放器等场景。但是它也存在明显的缺点：
- 会阻塞主页面的onload事件，影响页面加载速度
- 不利于搜索引擎抓取嵌入的内容，SEO效果差
- 存在跨域安全问题，需要额外配置沙箱等属性降低风险
- 移动端适配难度大，容易出现布局错乱问题
框架替代方案解析
如果不需要嵌入跨域的第三方页面，只是需要实现页面模块的拆分、复用，或者同域下的内容嵌入，可以选择以下几种替代方案，避免iframe的固有问题。
1. 前端路由+组件化开发
现代前端框架比如Vue、React、Angular都支持组件化开发，配合前端路由可以实现页面模块的拆分和切换，不需要使用任何框架标签。每个功能模块可以封装成独立的组件，通过路由配置实现不同组件的展示，页面的URL也会对应不同的组件内容，既方便SEO，也便于维护。
// Vue路由示例，将不同路径映射到不同组件
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
2. Ajax/ Fetch加载内容
如果是同域下的内容嵌入，可以通过Ajax或者Fetch请求获取目标页面的HTML片段，然后插入到当前页面的指定容器中，这种方式加载的内容属于当前页面的一部分，没有跨域限制，也不会影响SEO。
// 使用fetch加载同域下的页面片段并插入到指定容器
fetch('/partial/header.html')
.then(response => response.text())
.then(html => {
document.getElementById('header-container').innerHTML = html
})
.catch(err => console.error('加载失败:', err))
需要注意的是，这种方式加载的HTML片段中如果包含脚本，直接插入innerHTML不会执行，需要额外处理脚本的执行逻辑。
3. 服务端包含(SSI)
如果项目使用支持SSI的服务器比如Nginx、Apache，可以通过服务端包含的方式将公共模块的内容直接合并到页面中，在页面渲染阶段就完成内容的拼接，用户拿到的是完整的HTML页面，不存在加载性能问题，也利于SEO。
<!-- Nginx SSI语法，包含公共头部文件 --> <!--#include file="/partial/header.html" --> <main> 页面主体内容 </main> <!--#include file="/partial/footer.html" -->
4. 对象标签(object)
<object>标签也可以用来嵌入外部资源，功能和iframe类似，但是它的通用性更强，不仅可以嵌入HTML页面，还可以嵌入图片、视频、PDF等资源。不过它的兼容性和使用便捷性不如iframe，实际开发中用得比较少。
<object data="https://ipipp.com/demo.html" width="800" height="500"> 您的浏览器不支持object标签 </object>
不同场景的选择建议
开发者可以根据实际的需求场景选择合适的方案：
| 场景 | 推荐方案 |
|---|---|
| 嵌入第三方跨域内容（广告、地图、视频等） | iframe，配合sandbox属性提升安全性 |
| 同域下公共模块复用（头部、底部、侧边栏等） | 组件化开发、服务端包含、Ajax加载 |
| 单页应用模块切换 | 前端路由+组件化开发 |
| 需要嵌入非HTML资源（PDF、Flash等，已淘汰场景） | object标签 |
总的来说，html5虽然不再支持传统框架标签，但是仍然保留了iframe的使用能力，开发者需要结合场景权衡iframe和替代方案的优缺点，选择最适合的实现方式，提升页面的性能和用户体验。