同域下可通过iframe.contentdocument动态注入css，但须等待load事件完成；跨域时需用postmessage通信，且sandbox属性需同时配置allow-scripts和allow-same-origin才能双向通信。
同域下用 contentDocument 注入新 style 标签最直接
只要 iframe 的 src 和父页面协议、域名、端口完全一致，就能通过 contentDocument 拿到它的 DOM，然后动态插入 CSS。关键不是“能不能”，而是“什么时候插”——必须等 iframe 加载完成，否则 contentDocument 可能为空或不完整。
常见错误是没等加载完就操作，比如把脚本写在 <script></script> 标签里但没监听 load 事件。正确做法是：
- 用
iframe.onload或iframe.addEventListener('load', ...)确保加载完成 - 兼容性处理：优先用
iframe.contentDocument，fallback 到iframe.contentWindow.document - 插入位置建议放
body末尾（iframeDoc.body.appendChild(style)），避免被页面原有<link>样式表覆盖
const iframe = document.getElementById('myIframe');
iframe.onload = () => {
const doc = iframe.contentDocument || iframe.contentWindow.document;
const style = doc.createElement('style');
style.textContent = 'body { margin: 0; background: #f5f5f5; }';
doc.body.appendChild(style); // 不放 head，更稳妥
};
替换已有的 <link rel="stylesheet"> 需要先查再改
如果 iframe 页面本身通过 <link> 引入了外部 CSS，你可以直接改它的 href。但要注意：不是所有页面都有且只有一个样式表 link，有些页面可能有多个、有些用 @import、有些甚至没 link 标签。
别假设 document.querySelector('link[rel="stylesheet"]') 一定存在，也别硬写死索引（比如 links[0]）。
- 先用
querySelector查找，查不到就新建一个<link>插入head - 如果原样式表带
media或id，最好保留这些属性，避免媒体查询失效 - 换 href 后，浏览器会自动重新加载该 CSS，但不会清空已生效的内联样式或
<style></style>标签
iframe.onload = () => {
const doc = iframe.contentDocument;
let link = doc.querySelector('link[rel="stylesheet"][href*="main"]');
if (!link) link = doc.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/custom.css';
doc.head.appendChild(link);
};
跨域 iframe 不能读写 DOM，必须靠 postMessage 协作
一旦 iframe 的 src 是不同源（比如嵌入百度、微信客服页），contentDocument 就返回 null，任何直接操作都会报 Blocked a frame from accessing a cross-origin frame 错误。这时候没有绕过同源策略的“黑科技”，只有双方配合通信这一条路。
核心是：父页发消息，子页监听并执行样式修改。子页必须提前写好 message 监听器，否则消息发了也没人收。
- 父页用
iframe.contentWindow.postMessage(data, targetOrigin)，targetOrigin别偷懒写"*"，应明确指定来源（如"https://example.com"） - 子页需在全局监听
message事件，并校验event.origin防止恶意消息 - 样式修改逻辑（如改 class、设
style属性、切主题变量）全由子页自己实现，父页只传指令
// 父页
iframe.onload = () => {
iframe.contentWindow.postMessage({ action: 'setTheme', theme: 'dark' }, 'https://embedded-site.com');
};
// 子页（embedded-site.com 内）
window.addEventListener('message', (e) => {
if (e.origin !== 'https://parent-site.com') return;
if (e.data.action === 'setTheme') {
document.body.className = e.data.theme;
}
});
用 sandbox 属性时，postMessage 可能被禁用
如果 iframe 带了 sandbox 属性但没显式加 allow-scripts，那它连 postMessage 监听器都注册不了——因为 JS 被完全禁用了。更隐蔽的是，即使加了 allow-scripts，默认也不允许接收消息，得额外加 allow-same-origin 才能让 postMessage 双向工作（注意：allow-same-origin 会削弱沙箱隔离性，仅限可信子域）。
所以检查 iframe 是否可通信，不能只看跨域，还得看 sandbox 配置：
-
<iframe sandbox="allow-scripts"></iframe>→ 子页能运行 JS，但无法调用postMessage接收父页消息 -
<iframe sandbox="allow-scripts allow-same-origin"></iframe>→ 允许双向postMessage，但前提是子页和父页同源或子页主动设置document.domain - 真正跨域 + sandbox 场景，唯一安全方式是子页主动暴露 API（比如挂全局函数），父页通过
iframe.contentWindow调用——但这要求子页明确支持且未被 sandbox 拦截
实际项目中，最容易被忽略的是 sandbox 和 postMessage 的权限组合；调试时若 message 事件根本没触发，先看控制台是否报 Blocked script execution，再查 sandbox 属性是否漏配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
