同源时可直接操作iframe.contentWindow，跨域时必须用postMessage通信；需确保iframe加载完成、严格校验origin，否则触发安全错误。
iframe.contentWindow 与跨域限制是核心矛盾
能直接操作 iframe 内容的前提是同源——即 iframe 的 src 协议、域名、端口与父页面完全一致。否则调用 iframe.contentWindow.document 会触发 DOMException: Blocked a frame from accessing a cross-origin frame 错误，这是浏览器强制的安全策略，无法绕过。
常见误操作：拿到 iframe 元素后直接写 iframe.contentDocument.body.innerHTML = '...'，结果在控制台看到报错却找不到原因。
- 检查是否同源：在控制台执行
iframe.contentWindow.location.href，若报错或返回"about:blank"（尤其 iframe 刚创建未加载完成时），说明不可访问 - 确保 iframe 已加载完成：监听
load事件后再尝试访问contentWindow - 非同源场景下，必须改用
postMessage通信，这是唯一标准方案
同源 iframe：直接 DOM 操作最简单
同源时，contentWindow 和 contentDocument 可安全使用，等价于在目标页面上下文中执行 JS。
const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', () => {
const win = iframe.contentWindow;
const doc = iframe.contentDocument || win.document;
// 直接修改子页面 DOM
doc.body.style.backgroundColor = '#f0f0f0';
win.console.log('Hello from parent');
// 执行子页面定义的函数（需已声明）
if (typeof win.sayHi === 'function') {
win.sayHi();
}
});
注意：contentDocument 在部分旧浏览器中可能为 null，优先用 contentWindow.document 更稳妥；子页面 JS 必须已执行完毕，否则 win.sayHi 会是 undefined。
立即学习“Java免费学习笔记（深入）”；
跨域 iframe：必须用 postMessage + message 事件
父页向子页发消息用 iframe.contentWindow.postMessage()，子页向父页回传则监听全局 message 事件，并严格校验 event.origin。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
子页面（iframe 内）需主动监听：
window.addEventListener('message', (event) => {
// 关键：验证来源，防止恶意站点伪造消息
if (event.origin !== 'https://trusted-parent.com') return;
console.log('Received:', event.data);
// 可选：回传响应
event.source.postMessage({ reply: 'ack' }, event.origin);
});
父页面发送消息：
const iframe = document.getElementById('myIframe');
// 确保 iframe 加载完成再发
iframe.addEventListener('load', () => {
iframe.contentWindow.postMessage(
{ action: 'init', theme: 'dark' },
'https://example-iframe.com' // 必须写明目标 origin，不能用 '*'
);
});
容易忽略的点：postMessage 的第二个参数必须精确匹配 iframe 的实际 origin（不含路径），写成 '*' 在生产环境极不安全，Chrome 甚至会警告；子页收到消息后，event.source 就是父窗口的 window 对象，可用于定向回复。
获取 iframe 实际加载 URL 与错误诊断
iframe 加载失败时，contentWindow 可能为 null 或指向空页面，此时 contentWindow.location 不可读。可靠方式是监听 error 和 load 事件并结合 iframe.src 分析。
-
iframe.onload触发 ≠ 页面 JS 执行完毕，仅表示 HTML 加载完成 - 用
iframe.contentWindow?.location?.href判断是否成功跳转（同源下） - 跨域 iframe 的
src若是about:blank或javascript:void(0)，后续无法postMessage—— 因为没有确定的origin，必须设为真实 URL - 调试时可在 iframe 内加
<script>console.log('iframe loaded, origin:', location.origin)</script>确认运行环境
跨域通信的边界非常清晰：只要 origin 不同，一切 DOM 访问都禁止，postMessage 是唯一通道，且每次收发都要做 origin 校验。漏掉校验或误用 '*'，轻则功能失效，重则引入 XSS 风险。
