css变量不跨iframe传递，因各iframe有独立document；同源时需监听load事件后操作contentdocument写入或setproperty；跨域必须用postmessage配合origin校验手动应用。
CSS 变量（--my-color）本身不跨 iframe 传递，因为每个 iframe 拥有独立的 document 和样式作用域，变量只在定义它的 document 内生效。
为什么 document.documentElement.style.setProperty() 在子 iframe 中无效
父页面设置 document.documentElement.style.setProperty('--color', 'red')，只影响自身 document 的根元素；子 iframe 的 documentElement 是另一个对象，完全隔离。直接操作子 iframe 的样式变量需满足两个前提：同源 + 子 iframe 已加载完成。
- 跨域时
iframe.contentDocument为null或抛出Blocked a frame with origin...错误 - 即使同源，若在
iframe的load事件前访问contentDocument，也会得到null - 子 iframe 内部未声明
:root或未用var(--color)引用，变量设了也无视觉效果
同源场景下安全注入 CSS 变量的实操方式
必须通过 JS 向子 iframe 的 document 内部写入样式规则，而非依赖父级变量继承。
- 监听
iframe的load事件，确保contentDocument可访问 - 在子 iframe 的
head中插入<style></style>标签，显式定义变量：const style = iframe.contentDocument.createElement('style'); style.textContent = ':root { --primary: #007bff; }'; iframe.contentDocument.head.appendChild(style); - 避免用
innerHTML直接写入，防止 XSS；优先用textContent+createElement - 若子页面已含
:root，可用iframe.contentDocument.documentElement.style.setProperty()动态更新（仅限同源）
postMessage 是跨域传递主题配置的唯一可靠路径
当 iframe 跨域时，CSS 变量无法直传，必须靠消息机制把配置“告诉”子页面，由其自行应用。
- 父页面发送：
iframe.contentWindow.postMessage({ type: 'SET_THEME', vars: { '--primary': '#007bff' } }, 'https://target-domain.com') - 子页面监听：
window.addEventListener('message', e => { if (e.origin !== 'https://parent-domain.com') return; ... }) - 子页面收到后，遍历
vars对象，调用document.documentElement.style.setProperty(key, value) - 务必校验
e.origin，禁用'*'，否则存在 XSS 风险
容易被忽略的关键点
很多人卡在“变量写了但没生效”，其实问题常不在语法，而在执行时机和作用域错位：子 iframe 的 CSS 变量必须在其 own document 内定义或设置；跨域时没有捷径，postMessage 是标准解法，且必须配对验证 origin 和手动应用变量——浏览器不会帮你“透传”样式上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
