iframe 里看不到父页面的 CSS 是因为其拥有独立 document 上下文，主页面的 link 不会自动透传，这是同源策略的安全设计；同源时需克隆 link 并注入 iframe head，跨域则完全不可行。
不能直接“引入”，必须通过 JavaScript 克隆 link 节点并注入 iframe 的 head，且仅限同源场景。跨域 iframe 完全无法访问其内部 DOM，任何样式透传都无效。
为什么 iframe 里看不到父页面的 CSS
iframe 拥有完全独立的 document 上下文，主页面的 <link rel="stylesheet"> 不会自动透传。浏览器按同源策略隔离渲染环境，CSS 规则不会跨边界继承——这不是 bug，是安全设计。
常见错误现象包括：
-
Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node—— 直接把父页link移动进 iframehead，但 DOM 节点不能跨document复用 - 样式加载 404 ——
link.href是相对路径，在 iframe 上下文中解析失败 - 注入后无效果 ——
iframe.contentDocument为null，因未等 iframe 加载完成就操作
同源 iframe 中克隆 link 标签的实操要点
核心逻辑是：遍历父页 document.head.querySelectorAll('link[rel="stylesheet"]')，对每个匹配项深克隆、转绝对 URL、再插入 iframe head。
立即学习“前端免费学习笔记（深入）”；
- 必须用
cloneNode(true)，不能直接appendChild原节点 - 只处理
rel="stylesheet"的link，跳过rel="preload"、rel="icon"等无关项 - 用
new URL(link.href, document.baseURI).href把 href 转成绝对地址，避免路径解析错误 - 注入前检查 iframe
head是否已存在相同href的link，防止重复加载 - 必须监听
iframe.addEventListener('load', ...)，或轮询iframe.contentDocument.readyState === 'complete'
Vue/React 项目中动态注入的注意事项
在 Vue 或 React 组件中操作 iframe，要特别注意生命周期时机：
- 不要在
mounted钩子中立即操作 iframe DOM —— 此时 iframe 可能尚未开始加载 - 若 iframe
src是动态绑定的（如:src="iframeUrl"），需在watch中监听变更，并重新绑定load事件 - 使用
ref获取 iframe 元素比document.getElementById更可靠，尤其在 SSR 或 hydrate 场景下 - 若父页用了 CSS-in-JS（如 styled-components），其生成的
style标签不在head中，需手动提取规则并注入style标签而非依赖link克隆
跨域 iframe 完全无法注入样式的根本原因
当 iframe 的 src 指向不同协议、域名或端口时（例如父页是 https://a.com，iframe 是 https://b.com），浏览器会触发安全限制：
-
iframe.contentDocument和iframe.contentWindow.document均为null - 尝试访问会抛出
Blocked a frame with origin "xxx" from accessing a cross-origin frame - 此时唯一可行方案，是在 iframe 源文件本身中引入所需 CSS，或由服务端统一注入
别试图用 postMessage 让子页自己加载样式——子页 JS 仍受同源策略约束，无法修改自己的 head，除非它主动信任父页并实现接收逻辑，但这已超出“引入父页 CSS”的原始需求范畴。
