JavaScript操作iframe需区分同域与跨域：同域可直接通过contentWindow访问DOM；跨域必须使用postMessage API，并校验event.origin，且需等待iframe加载完成。
JavaScript 操作 iframe 的核心在于获取 iframe 元素及其内容窗口（window），但跨域时受同源策略限制，无法直接访问 contentWindow 或 contentDocument。实现跨域通信必须绕过直接 DOM 访问，改用浏览器提供的安全机制——postMessage API。
如何安全获取并操作同域 iframe
同源（协议、域名、端口完全一致）时可直接操作：
- 通过
document.getElementById('myIframe').contentWindow获取 iframe 内的全局 window 对象 - 调用
iframe.contentWindow.document读写 DOM（注意 iframe 必须已加载完成，建议监听load事件） - 执行脚本：
iframe.contentWindow.eval('alert("hello")')（不推荐，仅作说明）
跨域 iframe 通信：必须用 postMessage
postMessage 是唯一被广泛支持、安全且标准的跨域通信方式。它允许两个不同源的窗口（包括 iframe 和父页面）互相发送消息，且可指定目标源做校验。
- 父页面向子 iframe 发送消息：
iframe.contentWindow.postMessage(data, 'https://example.com');
第二个参数是目标 iframe 的确切源（如'https://a.com'），设为'*'表示不限制，但不推荐用于生产环境（存在安全风险） - 在 iframe 内监听消息：
window.addEventListener('message', event => {<br> if (event.origin !== 'https://parent.com') return;<br> console.log('收到：', event.data);<br>}); - iframe 向父页面回传消息：
window.parent.postMessage(data, 'https://parent.com');
常见陷阱与注意事项
实际开发中容易忽略的关键点：
立即学习“Java免费学习笔记（深入）”；
-
必须等待 iframe 加载完成再调用
postMessage，否则可能因 iframe 还未初始化而失败；可在 iframe 的load事件中触发首次通信 -
始终校验
event.origin，防止恶意站点伪造消息；不要只依赖event.source - 传递的数据会自动序列化（类似 JSON），因此函数、DOM 节点等无法直接传输；需提前转换或使用其他方案（如 URL 参数 + reload 配合）
- iframe 页面需主动监听
message事件，否则消息会被丢弃，无报错提示
替代方案（仅限特定场景）
当 postMessage 不适用时，可考虑：
-
代理页面（同源中转）：在同域下架设一个中间 HTML 文件嵌入跨域 iframe，由该页面与父页同源通信，再通过
postMessage与 iframe 通信 -
URL Hash 监听（已淘汰，不推荐）：利用
hashchange事件传递简单状态，但有长度限制、不安全、不可靠 - 服务端中转（非纯前端）：双方将消息发给后端，由后端广播或转发，适用于需要持久化或鉴权的场景
