JavaScript操作iframe需分同源与跨域：同源时用contentWindow直接访问DOM或调用函数，须等load事件；跨域唯一安全方式是postMessage，需校验origin、约定消息结构并支持双向通信。
JavaScript 操作 iframe 的核心在于正确访问其内容，而跨域通信必须绕过同源策略限制，不能直接读写对方 DOM 或属性。关键不是“能不能”，而是“怎么在安全前提下合法通信”。
获取 iframe 的 window 对象（同域前提）
同源 iframe 可通过 iframe.contentWindow 直接访问其全局对象，进而操作 DOM 或调用方法：
const iframe = document.getElementById('myIframe');-
const win = iframe.contentWindow;—— 获取子页面 window -
win.document.body.innerHTML = 'Hello';—— 修改内容（仅限同域） -
win.myFunction();—— 调用子页面定义的函数
⚠️ 注意：若 iframe 尚未加载完成，contentWindow 可能存在但 document 为空，建议监听 load 事件后再操作。
跨域 iframe 无法直接访问 DOM，必须用 postMessage
跨域时浏览器会抛出 SecurityError，唯一标准、安全的通信方式是 window.postMessage()。它不突破同源策略
，而是由浏览器做消息中转和源校验：
- 父页发消息给子 iframe：
iframe.contentWindow.postMessage(data, targetOrigin); - 子页监听：
window.addEventListener('message', handler) -
必须校验
event.origin，防止伪造来源；推荐用精确匹配（如'https://example.com'），避免通配符'*' - 数据自动序列化（仅支持可序列化值，如对象、字符串、数字，不能传函数或 DOM 节点）
示例（父页向子页发送配置）：
iframe.contentWindow.postMessage(
{ type: 'SET_THEME', theme: 'dark' },
'https://widget.example.com'
);
子页回传消息与双向通信设计
子页收到消息后，可通过 event.source.postMessage() 安全回传，实现请求-响应模式：
- 子页处理逻辑后，调用
event.source.postMessage(response, event.origin) - 父页需监听同一
message事件，并用event.data和event.origin区分不同来源和意图 - 建议约定统一消息结构，如
{ id: 'req_123', type: 'GET_USER', payload: {} }，便于追踪和防重放 - 避免在 message 处理中执行耗时操作，必要时用
setTimeout或Promise异步响应
其他安全与兼容性提醒
实际项目中还需注意：
-
禁止使用
document.domain—— 已被现代浏览器弃用，且仅适用于旧版 IE/部分子域场景，极不安全 - iframe 加载失败时，
contentWindow仍存在但不可用，应捕获error或检查iframe.contentDocument?.readyState - Safari 对跨域 iframe 的
postMessage有更严格策略（如隐身模式限制），建议 fallback 到 URL hash 或自定义协议（不推荐）前先测试 - 若需频繁通信，可封装成简单 channel 类，内部管理消息 ID、超时、重试，提升可维护性
