iframe创建的是独立浏览上下文，拥有自己的window、document、javascript执行环境、cookie和storage作用域，与父页面完全隔离；src为空时浏览器行为不一致，应避免依赖；同源可直接访问dom，跨域需postmessage通信；css不穿透但布局属性影响其容器。
iframe 创建的是独立浏览上下文，不是简单“插入 HTML 片段”
很多人误以为 iframe 是把另一个 HTML 文件的源码“复制粘贴”进当前页面，实际完全相反：iframe 会启动一个全新的 浏览上下文（browsing context），它拥有自己的：
-
window对象和document对象，与父页面完全隔离 - 独立的 JavaScript 执行环境（
iframe.contentWindow才能访问其 JS 上下文） - 独立的 Cookie、Storage（
localStorage、sessionStorage）作用域（受同源策略约束） - 独立的加载生命周期（
load事件只在 iframe 内部触发）
这意味着：你在主页面改了 document.body.style.color，对 iframe 里任何元素都无效；iframe 里执行 alert('hi')，不会影响主页面的任何状态。
src 属性缺失或为空时，浏览器行为不一致
src 是 iframe 的必需属性。但若你写成 <iframe></iframe> 或 <iframe src=""></iframe>，不同浏览器会 fallback 到不同默认值：
- Chrome / Edge：加载
about:blank（空文档，可写入内容） - Firefox：也倾向
about:blank，但某些版本可能报控制台警告 - Safari：可能渲染为不可交互的空白框，且
contentDocument为null直到显式设置src
所以，如果要动态注入内容，不要依赖空 src，而应：
- 用
srcdoc属性直接写入 HTML 字符串（仅同源有效，且不触发跨域限制） - 或先设
src="about:blank"，再通过iframe.contentDocument.write()写入（注意：必须在load后操作，否则可能被覆盖）
同源与跨域下 DOM 访问权限完全不同
能否用 JavaScript 操作 iframe 内容，完全取决于是否同源（协议 + 域名 + 端口三者一致）：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 同源时：可通过
iframe.contentDocument或iframe.contentWindow.document直接读写 DOM - 跨域时：访问
contentDocument会抛出DOMException: Blocked a frame from accessing a cross-origin frame错误 - 即使只是想监听
load事件，跨域 iframe 也能正常触发——但无法读取其 URL、title、document 等任何属性
常见误区是试图用 postMessage 绕过限制却忘了在 iframe 内监听：父页发消息必须由 iframe 主动响应，否则单向通信无意义。
CSS 样式不会穿透 iframe 边界，但布局会影响其渲染
父页面的 CSS 规则（比如 body * { font-size: 14px; }）对 iframe 内部样式完全无效。iframe 内部样式只受其自身 <link>、<style></style> 和内联 style 控制。
但父页面的布局属性会直接影响 iframe 元素本身：
-
width/height、max-width、aspect-ratio都会约束 iframe 的容器尺寸 -
overflow: hidden在父容器上设置，可能裁剪 iframe 溢出部分（尤其当 iframe 内部有position: fixed元素时） - Flex/Grid 容器中的
align-items或justify-content会影响 iframe 的对齐，但不会改变其内部排版
最容易被忽略的一点：iframe 默认是 display: inline，会在底部留白（像图片一样），解决方法只有两个——加 vertical-align: top，或设 display: block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
