同源 iframe 无法复用父页 css，因其拥有独立 document 上下文，样式必须显式引入或动态注入；错误跨 document 操作 dom 会报错，正确做法是 iframe 自行加载 base.css 或 onload 后注入 style。
同源 iframe 里不能直接复用父页 <link>，也不能靠“继承”或“穿透”让父页 CSS 生效；必须显式引入、隔离作用域，否则样式会冲突或失效。
为什么 iframe 里的 CSS 不自动生效
iframe 拥有独立的 document 上下文，主页面的 <link rel="stylesheet"> 标签不会透传过去——哪怕同源，浏览器也严格隔离渲染环境。常见现象包括：body 宽度被限制为 100%、.btn 颜色没变、自定义字体加载失败等，本质都是样式未到达 iframe 内部 DOM。
错误地尝试 parentHead.appendChild(link) 到 iframe 的 head 会触发：Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node —— 因为 DOM 节点不能跨 document 直接移动。
同源场景：在 iframe 内部重新引入 CSS 文件
最稳妥的做法是让 iframe 页面自己加载所需样式，与父页完全解耦。这不是“偷懒”，而是符合 Web 渲染模型的设计逻辑。
- 把父页通用样式（如重置、工具类）抽成
base.css，iframe 页面的中显式<link href="base.css" rel="stylesheet"> - 避免在父页 HTML 中给 iframe 设置
style属性来“覆盖”内部样式，这类内联样式只作用于 iframe 元素本身，不影响其内部文档 - 若 iframe 是动态生成的（如通过
srcdoc），需把<link>或<style></style>写进srcdoc字符串中，不能事后注入
同源场景：用 JS 动态注入样式（仅限必要时）
当无法修改 iframe 源文件（比如 iframe 来自 CMS 输出或第三方模板），且必须临时增强样式时，可在父页监听 load 后向 iframe 注入 <style></style>。
关键点：
- 必须等
iframe.onload触发后再操作，否则contentDocument可能为空 - 用
iframe.contentDocument.createElement('style')创建新节点，textContent写入 CSS 字符串，再appendChild到 iframe 的head或body - 不要试图克隆父页的
<link>并cloneNode(true)插入——路径可能变成相对地址、@import和url()里的资源大概率 404 - 注入到
body末尾比head更可靠，可规避某些页面 onload 后动态插入的 CSS 覆盖问题
示例片段：
const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', () => {
const doc = iframe.contentDocument || iframe.contentWindow.document;
const style = doc.createElement('style');
style.textContent = '.event { display: table-row; } .event > * { width: 20%; display: table-cell; }';
doc.body.appendChild(style);
});
父子样式独立的关键细节
真正难的不是“怎么加”，而是“加完不打架”。容易被忽略的点：
<tr>、<code><td> 等表格元素对 <code>width、display属性极其敏感，直接设width: 20%给<tr> 无效，必须作用于 <code><td> 或改用 <code>display: table-cell- 父页和 iframe 都用了
normalize.css或reset.css？重复加载会导致box-sizing、margin行为不一致，建议只由 iframe 自己加载 - 字体图标（如 Font Awesome）路径在 iframe 内是相对于 iframe URL 的，不是父页 URL，硬编码路径会 404
- 如果 iframe 页面用了 CSS-in-JS（如 Emotion、Styled Components），它的样式 scope 是运行时生成的，JS 注入的
<style></style>无法参与该 scope，优先级天然更低
样式独立不是靠“禁用”或“屏蔽”，而是靠明确边界、各自负责——父页管 iframe 元素自身，iframe 页面管自己内部所有渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
