iframe内CSS样式无效是因为外部样式无法穿透到独立文档上下文，必须将link或style标签明确写入iframe自身HTML的head中，同源时可通过JS动态注入，跨域则只能由子页面自行加载样式。
iframe 内的 CSS 样式无效，通常是因为样式没作用到 iframe 内部文档（即子页面），而非“CSS 写错了”。iframe 是独立的文档上下文，外部 CSS 默认无法穿透影响其内部内容。要让样式生效，必须把样式明确加载进 iframe 的 中。
iframe 内必须通过内部 link 或 style 引入样式
外部页面的 CSS 选择器（哪怕用了 ::shadow 或 /deep/）在现代浏览器中已废弃且不生效。唯一可靠方式是：确保 iframe 所加载的 HTML 页面自身包含 或内联 。
- ✅ 正确做法：iframe 源文件（如
content.html）里写： - ❌ 错误做法：父页写
#myIframe .btn { color: red; }—— 完全无效 - ⚠️ 注意：若 iframe 是
src="about:blank"或通过document.write()动态写入内容，需手动注入到其contentDocument.head
动态创建 iframe 时注入样式 link
如果 iframe 是 JS 创建且内容为空白或由脚本生成，可在其文档就绪后插入 link 标签：
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const doc = iframe.contentDocument || iframe.contentWindow?.document;
doc.open();
doc.write(`Hello`);
doc.close();
// 等待文档加载完成再注入样式
const link = doc.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/iframe-style.css';
doc.head.appendChild(link);
同源限制下可操作 DOM，跨域则完全不可控
只有 iframe 与父页同源（协议、域名、端口均相同），JS 才能访问其 contentDocument 并注入样式。一旦跨域：
立即学习“前端免费学习笔记（深入）”；
- 父页 JS 无法读写 iframe 内部任何内容
- 无法动态加 link、改 class、插入 style
- 唯一办法：让被嵌入的页面自己带上正确样式（服务端渲染或前端构建时内置）
避免用 import 或 @import 加载 iframe 外部样式
不要在 iframe 页面里用 @import url(...) 引入父页样式路径——路径容易出错，且 @import 性能差、阻塞渲染。优先用 ，并确保路径相对于 iframe 页面本身（不是父页）。
- 例如 iframe 页面 URL 是
https://a.com/embed/page.html，则href="style.css"会请求https://a.com/embed/style.css - 若需共用样式，建议将 CSS 发布为 CDN 链接，iframe 页面直接引用绝对 URL
基本上就这些。核心就一条：iframe 是独立文档，样式必须落在它自己的 head 里，不能靠外部“穿透”。不复杂但容易忽略。
