什么是iFrame

读取 ，行 1 到 60

iframe 是什么

<iframe>（inline frame）是 HTML 标签，用于在当前页面内嵌另一个独立的 HTML 页面。两者完全隔离，各自有独立的 DOM、JS 运行环境、样式。

<!-- 在页面内嵌一个网页 -->
<iframe src="https://example.com" width="800" height="600" />

主要特性

特性	说明
沙箱隔离	iframe 内的 JS 崩溃不影响父页面
样式隔离	互不影响 CSS
跨域限制	不同域之间默认不能直接互访 DOM
通信机制	通过 postMessage API 跨框架传消息

父页面与 iframe 通信

// 父页面 → 向 iframe 发消息
iframeElement.contentWindow.postMessage({ type: "update", data: "..." }, "*");

// iframe → 向父页面发消息
window.parent.postMessage({ type: "ready" }, "*");

// 任意一方监听消息
window.addEventListener("message", (event) => {
  console.log(event.data);
});

项目中 iframe 的用途

结合代码，这个项目用 iframe 实现了 HTML 预览面板：

1. AI 生成 HTML 代码 → Agent 调用 openPanel("preview", { html: "..." })
2. 右侧面板渲染 iframe → 把生成的 HTML 内容注入 iframe 中执行显示
3. Agent 与 iframe 通信 → sendMessageToIframe 工具允许 Agent 向 iframe 发送 postMessage，动态更新预览内容（比如改变数据、触发动画等）

本质是用 iframe 作为沙箱执行环境，安全地运行 AI 生成的任意 HTML/JS 代码，即使代码有问题也不会影响主应用。