iframe子页面无法直接继承父页面css样式，因浏览器将每个iframe视为独立文档环境；同源时需手动克隆或重建link标签注入，或动态插入style标签；跨域时完全禁止访问，只能通过postmessage由子页自行响应样式变更。
iframe子页面无法直接“调用”父页面CSS样式
子页面不能自动继承或复用父页面的 <link> 或 <style></style> 样式表 —— 浏览器把每个 iframe 当作独立文档环境，CSS 作用域天然隔离。所谓“调用”，实际是「在子页面中重新加载/注入相同样式资源」，且仅限同源场景。
同源时：手动复制父页样式 link 到子页 head
直接 appendChild 父页的 <link rel="stylesheet"> 会报错：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 复用。
必须深克隆或重建：
- 监听
iframe.onload，确保子页contentDocument可写 - 只选
rel="stylesheet"的 link，跳过rel="icon"、rel="preload"等 - 用
cloneNode(true)安全克隆，再appendChild到子页head - 或更推荐：手动创建新
<link>，显式赋值href（避免相对路径解析失败）
示例（手动创建）：
const parentLinks = document.head.querySelectorAll('link[rel="stylesheet"]');
parentLinks.forEach(link => {
if (!link.href) return;
const newLink = iframeDoc.createElement('link');
newLink.rel = 'stylesheet';
newLink.type = 'text/css';
newLink.href = link.href; // 注意：必须是同源可访问的绝对路径
iframeDoc.head.appendChild(newLink);
});
同源时：动态注入 style 标签覆盖或补充样式
如果只需局部调整（比如重设按钮颜色、隐藏某区块），比加载整套 CSS 更轻量：
- 等
iframe.onload后获取iframe.contentDocument - 创建
<style></style>元素，写入 CSS 规则（支持选择器、伪类、媒体查询） - 插入到子页
head（可能被页面原有样式覆盖）或body开头（更易生效） - 注意：内联样式优先级高于外部 CSS，但 !important 仍可能被更高权重规则压制
示例：
const style = iframeDoc.createElement('style');
style.textContent = '.event td { width: 20%; display: inline-table; }';
iframeDoc.head.appendChild(style);
跨域时：没有可行方案，别尝试绕过
浏览器明确禁止跨域 iframe 访问 contentDocument 或 contentWindow.document，任何读取、注入、修改都会触发 SecurityError: Blocked a frame with origin "xxx" from accessing a cross-origin frame。
此时唯一合法路径是：
- 让子页面自身加载所需 CSS（由子页 HTML 决定）
- 若需动态控制样式，必须由父页通过
postMessage发送指令，子页自行响应并操作自身 DOM 或 class - 严禁在子页 JS 中写
parent.document.querySelector('link')或类似逻辑 —— 它在跨域下根本执行不到那行
真正容易被忽略的点：即使你用 postMessage 传了 class 名，子页也必须提前定义好对应 CSS 规则；父页无法把 CSS 字符串发过去再动态 eval —— 那样既不安全也不符合 CSP 策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
