iframe不能自动继承父页面的和css变量，因其是独立文档上下文；同源时需手动注入绝对路径的link或style标签，跨域则依赖postmessage。
iframe 为什么不能自动继承父页面的 <link rel="stylesheet">
因为 iframe 是一个完全独立的文档上下文（browsing context），它有自己的 document、head 和样式作用域。浏览器不会把父页面 里的 <link> 标签“复制”或“透传”到子文档中——这不是遗漏，而是设计使然。
常见错误现象包括：父页引入了 main.css，子页 HTML 里什么都没写，却以为按钮会自动变蓝；或者用 DevTools 查看子页元素的 computed styles，发现 color 是浏览器默认值，而非父页设置的 --primary 变量。
关键点在于：<link> 的加载和解析都绑定在它所属的 document 上。父页的 link.href 是相对 document.baseURI 解析的，而 iframe 内部会用自己的 URL 去解析同样的路径，极易 404。
同源时如何手动注入父页 CSS 文件
必须监听 load 事件，确保 iframe.contentDocument 可访问；然后遍历父页 document.head.querySelectorAll('link[rel="stylesheet"]')，逐个构造新 <link> 插入子页 head。
- 用
new URL(link.href, document.baseURI).href把相对路径转成绝对路径，避免子页解析出错 - 跳过
rel不是"stylesheet"的节点（如rel="icon"或rel="preload"） - 注入前检查子页
head是否已存在相同href的<link>，防止重复加载 - 若 iframe
src="about:blank"，需先调用iframe.contentDocument.open(); iframe.contentDocument.close();初始化文档
CSS 变量（--my-var）为何也不继承
CSS 自定义属性只在声明它的 documentElement 范围内有效。父页设了 document.documentElement.style.setProperty('--color', 'red')，对 iframe 的 documentElement 完全无感——它们是两棵隔离的 DOM 树。
调试时最该盯住 DevTools 的 “Defined in” 字段：如果显示来源是父页或第三方，说明变量根本没进子页 元素的 style 属性里。
- 同源时可用
iframe.contentDocument.documentElement.style.setProperty()动态设值 - 更稳妥的是创建
<style></style>标签，写入:root { --color: red; }后插入子页head - 跨域时唯一可行方式是
postMessage，但必须校验e.origin，且子页 CSS 中得实际用到var(--color)才生效 - 注意
all: unset或all: initial会清空所有自定义属性，导致var()回退 fallback
为什么不能直接克隆父页的 <link> 节点
直接 iframe.contentDocument.head.appendChild(parentLink) 会报错：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 实例。父页的 <link> 是 parent.document 的产物，无法作为子文档的子节点被接受。
- 可用
parentLink.cloneNode(true)深克隆，但不推荐——克隆后仍可能携带跨域资源引用（如字体、图片），在子页上下文中触发 CORS 或 404 - 更稳妥的做法是手动
createElement('link')，仅赋值rel、type、href等必要属性 - 绝对路径转换不可省：哪怕父页
href="./css/main.css"，在子页里解析时基准是子页 URL，不是父页
最容易被忽略的其实是路径解析和作用域隔离这两个底层事实——不是 JS 写错了，而是你试图让两个独立文档共享资源，而浏览器从没打算帮你做这件事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
