结论：iframe 全称 inline frame，是 HTML 里面的内嵌框架标签，可以在当前网页内部嵌入加载另外一个独立网页，被嵌入页面拥有独立文档环境，和父页面相互隔离，适合嵌入第三方页面 报表 地图 业务子系统，但是同时存在 SEO 跨域 安全方面的明显短板，现在新项目会谨慎使用，很多场景会改用组件化或者微前端方案替代。
一 核心优点特点
1 页面独立隔离
iframe 内部是一份完整独立 HTML 文档，拥有自己的 window document 对象，独立 DOM 树，独立加载资源，内部页面脚本样式不会直接污染父页面，父页面样式默认也不会作用到 iframe 内部页面。
2 独立加载独立刷新
iframe 内部页面可以单独刷新，不需要重载整个父页面，适合局部加载独立业务模块，比如后台系统里面嵌入子页面。
3 方便嵌入第三方内容
不需要合并代码，直接通过 src 属性填入外部网址，就可以嵌入地图 在线文档 第三方支付页面 老业务系统页面，集成成本很低。
4 支持独立滚动
iframe 可以设置宽高，内部页面单独滚动，父页面和 iframe 滚动条互相独立。
5 跨技术栈兼容
老系统重构的时候，可以用 iframe 把旧系统页面嵌入新系统，实现新旧系统过渡，不需要立刻重写老业务代码。
二 缺点与限制特点
1 跨域访问限制
同源策略约束，父页面和 iframe 页面如果域名协议端口任意一项不一致，JS 无法直接读写 iframe 内部 DOM，不能直接调用内部页面变量和方法，跨域通信只能依靠 postMessage。
2 SEO 不友好
搜索引擎爬虫很难识别 iframe 里面的页面内容，iframe 内部页面不容易被收录，对官网 营销类网站非常不利。
3 交互体验缺陷
iframe 内部页面的滚动 锚点 浏览器前进后退历史记录处理比较麻烦，浏览器历史栈会混入 iframe 页面跳转记录，容易出现返回异常。
4 安全风险
存在点击劫持风险，恶意网站可以通过 iframe 套层诱导用户误点击，所以很多站点会设置 X Frame Options 或者 CSP frame-ancestors，禁止被别人 iframe 嵌套。
5 性能开销
每一个 iframe 相当于新建一套独立文档环境，会额外增加请求 内存 渲染开销，页面嵌套多个 iframe 的时候，页面加载变慢，内存占用升高。
6 移动端适配麻烦
iframe 内部页面不会自动跟随父页面自适应，经常出现横向滚动 尺寸错位，移动端调试成本高。
三 基础语法
常用属性
src 要加载的页面地址
width height 设置宽高
name 框架名称
sandbox 安全沙箱，限制 iframe 内部脚本 表单 弹窗权限
allow 权限声明，控制摄像头 全屏等能力
四 适用场景与不推荐场景
适用场景
后台管理系统嵌入老业务页面
嵌入第三方地图 在线文档
局部独立模块隔离渲染
不推荐场景
官网首页 落地页这类需要 SEO 的页面
需要深度 JS 交互、跨页面频繁传参的业务
移动端大量嵌套 iframe 的项目
【常见问题】
问题 1 Iframe 特点，iframe 里面页面和父页面是同一个 DOM 吗
回答 1 不是，iframe 内部是独立 document，拥有单独 DOM 树，这是 Iframe 特点里面最重要的隔离特性，跨域情况下父页面不能直接操作这个 DOM。
问题 2 Iframe 特点，为什么别的网站不能随便 iframe 嵌套我们页面
回答 1 对方网站可以设置 X Frame Options 或者 CSP frame-ancestors 响应头，禁止被 iframe 引用，属于安全防护，也是 Iframe 特点里面安全限制部分。
问题 3 Iframe 特点，跨域 iframe 怎么和父页面通信
回答 1 不能直接读写 DOM，需要使用 postMessage 消息通信，这是跨域场景下 Iframe 特点对应的标准解决方案。
问题 4 Iframe 特点，现在为什么很多新项目不再推荐 iframe
回答 1 主要是 SEO 差 历史记录混乱 性能开销大，微前端等新方案可以替代，所以新项目会谨慎使用 iframe，属于 Iframe 特点带来的弊端。
【免责申明】
本文为前端 HTML 技术科普，不同浏览器对 iframe 属性支持存在细微差异，实际开发请参考浏览器官方规范。
