跨域iframe无法被父页面JS访问DOM或样式，因同源策略限制导致contentDocument等属性抛SecurityError；同源时需onload后操作且注意路径与加载顺序。
能，但只在同源且正确配置的前提下成立。跨域 iframe 无法被父页面 JS 访问样式或 DOM，看似“隔离”，实则只是被浏览器安全策略锁死——你改不了它，它也改不了你，但它的 style 标签、class 选择器仍会作用于自身文档，不等于“自动免疫全局污染”。真正起隔离作用的是文档边界，不是魔法开关。
iframe.contentDocument 在跨域时抛出 SecurityError 是常态
这是最常被误读的点：很多人以为“iframe 创建了就隔离”，结果在控制台看到 Blocked a frame with origin "https://a.com" from accessing a cross-origin frame. 就慌了。其实这恰恰说明隔离生效了——浏览器没让你越界，不是 bug，是 feature。
- 跨域 iframe 的
contentDocument、contentWindow.document均不可读写，任何尝试（如iframe.contentDocument.head.appendChild(...)）都会触发SecurityError - 父页面的 CSS 样式（哪怕写了
iframe * { color: red; }）完全不会穿透进 iframe 内部，因为 iframe 拥有独立的document和渲染树 - 但 iframe 自身 HTML 中的
<style>body{margin:0}</style>或引入的外部 CSS，依然会完整作用于它自己的 DOM，和父页面无关
同源 iframe 可以注入样式，但必须等 onload 完成
同源时你能操作 contentDocument，但时机不对就会报 Cannot read property 'head' of null。常见错误是直接在 mounted 里取 iframe.contentDocument，此时 iframe 还没加载完。
- 必须监听
iframe.onload或使用iframe.contentWindow.addEventListener('load', ...) - 获取文档对象要兼容写法：
const doc = iframe.contentDocument || iframe.contentWindow?.document - 插入样式推荐用
<style>标签而非直接改元素style属性，避免被 iframe 内原有 CSS 规则覆盖（尤其是带!important的） - 示例：
const style = doc.createElement('style');<br>style.textContent = `.header { display: none; }`;<br>doc.head.appendChild(style);
iframe 的 sandbox 属性不影响样式隔离，只管脚本与行为权限
sandbox 是安全沙箱开关，和 CSS 无关。它控制的是能否运行脚本、提交表单、访问弹窗等行为，但对样式加载、类名匹配、选择器作用域毫无影响。
立即学习“前端免费学习笔记（深入）”；
-
sandbox="allow-scripts"允许执行 JS，但不改变样式作用域 -
sandbox="allow-same-origin"仅在同源 iframe 上解除同源限制（让contentDocument可访问），不是开启样式穿透 - 即使不加
sandbox，同源 iframe 的样式也天然隔离；加了它，跨域 iframe 依然无法被父页面样式影响——隔离靠的是文档模型，不是 sandbox
真正容易被忽略的是资源路径和加载顺序：iframe 内部的 <link href="main.css"> 如果是相对路径，会相对于 iframe 的 URL 解析，不是父页面的 base URL；而父页面的 CSS-in-JS 或动态插入的样式，根本到不了 iframe 里面。隔离很彻底，但“彻底”不等于“零配置”——你得确保 iframe 自己的样式链完整且可控。
