不能直接用父页面CSS控制iframe内部元素样式，仅同源时可注入样式；iframe标签本身可用CSS控制宽高、边框、圆角等外观。
不能直接用父页面的 CSS 选择器控制 iframe 内部元素的样式，除非 iframe 同源且你主动把样式注入进去；iframe 标签本身可以用 CSS 控制外观（比如宽高、边框、圆角），但里面的内容是隔离的。
给 iframe 标签本身加 CSS 样式
这是最安全、最通用的操作，完全不涉及同源策略：
-
width和height推荐用 CSS 而非 HTML 属性，例如style="width: 100%; height: 600px;" - 移除默认边框：加
border: none;或frameborder="0"（后者已过时，仅作兼容） - 圆角/阴影：可直接对
<iframe>元素设border-radius、box-shadow - 禁止缩放滚动条干扰布局：
overflow: hidden;配合scrolling="no"（HTML5 中已废弃，纯靠 CSS） - 确保可访问性：
title属性必须存在，且值要描述内容，否则屏幕阅读器无法识别
同源 iframe 内部样式注入（必须满足 same-origin）
只有当 iframe src 和父页面协议、域名、端口完全一致时，才能操作其内部 DOM。常见错误是以为子域名相同就算同源（app.example.com ≠ example.com）：
- 等
iframe.onload触发后再操作，否则contentDocument可能为空 - 用
iframe.contentDocument || iframe.contentWindow.document获取内部文档对象 - 推荐把
<style>插入iframeDoc.head，但若目标页面有 CSP 策略限制内联样式，就得改用外部 CSS 文件 +<link>注入 - 不要用
document.write()，它会清空整个 iframe 文档 - 示例关键代码：
iframe.onload = () => { const doc = iframe.contentDocument; const style = doc.createElement('style'); style.textContent = '.event { background: #eee; }'; doc.head.appendChild(style); };
跨域 iframe 的样式控制根本不可行
浏览器明确阻止任何对跨域 iframe 的 DOM 访问或样式写入，这不是 bug，是强制安全机制：
立即学习“前端免费学习笔记（深入）”；
- 尝试访问
iframe.contentDocument会抛出DOMException: Blocked a frame from accessing a cross-origin frame. - 用
postMessage也无法绕过——它只能通信，不能帮你改对方页面的 CSS - 唯一可行路径：联系 iframe 源站，在其 HTML 中直接加 class 或内联样式，或提供带预设样式的 embed API
- 误信“用 shadow DOM”“用 iframe sandbox”能突破限制？不行。sandbox 只限制 iframe 自身行为，不开放父页访问权
想让 iframe 加载后自动滚动到某段文字？用 text fragment
不需要 JS，也不需要同源，只要目标页面没禁用该特性（Chrome/Edge/Safari 支持，Firefox 不支持）：
- URL 末尾拼上
#:~:text=关键词，例如src="https://example.com/page.html#:~:text=每日菜单" - 中文、捷克语等需 URL 编码：
encodeURIComponent("denní menu")→denn%C3%AD%20menu - 匹配是首次出现的连续文本，不区分大小写，但必须完全一致（空格、标点都不能错）
- 如果 Firefox 是主力用户，得准备 fallback：比如在 iframe 外加一个「跳转到菜单」按钮，用 JS 模拟点击锚点（前提是目标页有对应
id）
真正容易被忽略的是：哪怕同源，iframe 内容加载顺序、CSS 优先级、CSP 头、以及 display: contents 在表格中的兼容性，都可能让看似正确的样式不生效。别急着怀疑代码，先检查控制台有没有 CSP violation 或 SecurityError 报错。
