iframe样式丢失是因为其拥有独立document上下文，主页面link不会自动透传；需克隆rel="stylesheet"的link并转为绝对URL后注入，且须确保iframe已加载完成。
iframe里样式丢失，是因为它有独立的document上下文
主页面的 <link> 标签不会自动透传到 iframe 的 document 中，哪怕 iframe 是同源的。浏览器把 iframe 当作一个隔离的渲染环境，CSS 不会跨边界继承。
常见错误现象：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> 元素直接 append 到 iframe 的 head，但 DOM 节点不能跨 document 复用。
- 必须克隆节点（
cloneNode(true)），不能直接移动原<link> - 只复制
rel="stylesheet"的 link，跳过rel="preload"或rel="icon" - 确保 iframe 已加载完成（监听
load事件，或检查iframe.contentDocument.readyState === 'complete'）
用JS把主页面link克隆进iframe的head
核心逻辑是：遍历主页面 document.head.querySelectorAll('link[rel="stylesheet"]')，对每个匹配项做深克隆，再插入 iframe 的 head。注意路径问题——如果 link 的 href 是相对路径，它会在 iframe 的上下文中解析，可能 404。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用绝对 URL：把
link.href转成完整地址，例如new URL(link.href, document.baseURI).href - 避免重复注入：检查 iframe 的
head是否已存在相同href的 link（可比对getAttribute('href')） - 不要在 iframe 尚未 ready 时操作，否则
contentDocument可能为null
简短示例：
const iframe = document.getElementById('my-iframe');
iframe.addEventListener('load', () => {
const iframeDoc = iframe.contentDocument;
const mainLinks = document.head.querySelectorAll('link[rel="stylesheet"]');
mainLinks.forEach(link => {
const absHref = new URL(link.href, document.baseURI).href;
const clone = link.cloneNode(true);
clone.href = absHref;
iframeDoc.head.appendChild(clone);
});
});
同源限制下，跨域iframe无法注入样式
如果 iframe 是跨域的（比如嵌入第三方页面），iframe.contentDocument 会触发安全异常：Blocked a frame with origin "xxx" from accessing a cross-origin frame。这时候 JS 完全无法触达 iframe 内部 DOM，复制 link 是不可能的。
替代思路有限：
- 服务端代理该 iframe 页面，并内联所需 CSS（需控制后端）
- 改用
srcdoc属性手动拼 HTML 字符串，把样式<style>写进去（仅适用于内容可控、无复杂交互的简单场景） - 放弃 iframe，改用
<div>+fetch加载 HTML 片段（但会丢失 iframe 的沙箱和 CSP 隔离优势）
动态注入后，CSS优先级和媒体查询可能失效
克隆进来的 <link> 在 iframe 中的加载顺序，未必和主页面一致；而且 iframe 自身可能已有同名类或更早的 <style>，导致样式被覆盖。另外，主页面 link 上的 media 属性（如 media="(prefers-color-scheme: dark)"）虽然会被克隆，但它的计算上下文是 iframe 窗口，不是父窗口——这意味着暗色模式检测可能不生效。
关键细节：
- 不要依赖 link 的插入顺序来控制权重，该加
!important的地方还得加 - 媒体查询若需响应父页面状态，得用 JS 监听并手动切换 iframe 内的 class 或
media属性 - 如果主页面用了 CSS Custom Properties（变量），它们不会自动继承到 iframe，得显式重写或通过 JS 注入 :root 变量
这件事真正麻烦的地方不在“怎么复制”，而在于“复制之后，样式是否还在预期的上下文中起作用”——DOM 隔离只是第一层，样式计算上下文、资源路径、媒体环境、变量作用域，每一层都可能悄悄偏离你的直觉。
