iframe和postMessage详解

1.iframe详解

1.iframe是什么

iframe（‌内联框架‌）是 HTML 中的一个标签，用于在网页内嵌入另一个独立的网页或内容（同源/非同源均可）。其全称为 ‌Inline Frame‌，核心功能是‌跨页面内容集成‌，同时通过沙箱机制实现安全隔离。iframe 创建了一个独立的浏览上下文，拥有自己的文档对象模型（DOM）和执行环境，这意味着它不会与主页面共享JavaScript变量或CSS样式，提供了较好的隔离性。我们可以将含有 iframe 元素的文档称为父文档（或者说父浏览上下文） ，iframe 元素渲染出来的文档称为子文档（或者说子浏览上下文） 

2.iframe 的作用详解

1.核心作用

‌iframe（内联框架）‌ 是 HTML 中用于在页面内嵌入其他独立内容的标签，主要功能包括：

1. ‌内容嵌入‌

   • ‌跨域/同源页面集成‌：将第三方页面（如地图、视频、广告）嵌入当前页面，突破同源策略限制‌。
   • ‌模块化开发‌：在微前端架构中，通过 iframe 实现不同子应用的独立运行和隔离‌。

2. ‌沙箱隔离‌

   • ‌环境隔离‌：默认限制 iframe 内脚本访问父页面 DOM，防止全局 CSS/JS 污染‌35。
   • ‌安全控制‌：通过 sandbox 属性禁用危险操作（如弹窗、表单提交），防范 XSS 攻击‌25。

3. ‌跨域通信‌

   • ‌数据传递‌：结合 postMessage API 实现父页面与 iframe 的双向安全通信‌。
   • ‌单点登录（SSO）‌：通过隐藏的 iframe 跨域传递 Token，同步多个子系统的登录状态‌。

3.iframe 核心属性详解 

1. ‌src‌：指定嵌入内容的 URL 地址（支持相对或绝对路径）‌。
2. ‌name‌：定义 iframe 的标识名称，用于 JavaScript 引用或作为 <a>/<form> 的 target 目标‌。
3. ‌width/height‌：控制 iframe 的宽度和高度，支持像素（px）或百分比（%），默认宽 300px、高 150px‌。
4. ‌frameborder‌：设置边框显示状态：0（无边框）或 1（显示边框），推荐用 CSS 替代‌。
5. ‌marginwidth/marginheight‌：定义 iframe 内容与边框的左右/上下间距（单位：像素）。
6. ‌scrolling‌：控制滚动条显示：yes（始终显示）、no（隐藏）或 auto（按需自动显示）‌。
7. ‌align‌：规定对齐方式（如 left/right/top/middle），但 HTML5 已废弃，建议用 CSS 替代‌。
8. ‌sandbox‌：启用沙盒模式限制 iframe 权限，可选值：allow-scripts（允许执行脚本）allow-same-origin（允许同源访问）allow-forms（允许表单提交）‌。
9. ‌allowfullscreen‌：控制是否允许全屏模式（true/false）‌。
10. ‌allow‌：定义功能权限（如&n