同源 iframe 可直接通过 contentDocument 操作 DOM 并写入 HTML 或脚本；跨域 iframe 必须使用 postMessage 通信，且需严格校验 event.origin 和 event.source 以确保安全。
获取和操作 iframe 内部的 DOM 元素
如果 iframe 与当前页面同源（协议、域名、端口完全相同），可以直接通过 contentDocument 或 contentWindow.document 访问其内部文档：
- 确保 iframe 已加载完成，监听 load 事件再操作，否则可能报错或取到空内容
- 推荐写法：iframe.contentDocument || iframe.contentWindow.document（兼容性更好）
- 例如：iframe.contentDocument.querySelector('#btn').click() 可触发子页面按钮
- 注意：若 iframe 是动态插入且未设置 src，或 src 为 about:blank，contentDocument 通常可用；但 src 为跨域地址时会抛出安全错误
向 iframe 写入 HTML 或执行脚本
同源前提下，可直接写入内容或注入脚本：
- 清空并写入新 HTML：iframe.contentDocument.write(htmlStr)，之后记得调用 document.close()
- 动态插入 script 标签（更安全）：const script = iframe.contentDocument.createElement('script'); script.textContent = 'console.log("hello");'; iframe.contentDocument.head.appendChild(script);
- 避免直接 write() 后继续操作 DOM，容易引发重载或状态异常，优先用 innerHTML + createElement 方式
跨域 iframe 通信：postMessage 是唯一标准方案
不同源 iframe 无法直接读写 DOM 或属性，必须使用 window.postMessage() 进行双向通信：
- 发送方（父页或子页）调用：otherWindow.postMessage(data, targetOrigin)，targetOrigin 必须写明确（如 'https://example.com'），不能用 '*'（除非完全信任目标）
- 接收方需监听 message 事件，并验证来源：event.origin === 'https://trusted.com' 和 event.source（可选）
- data 参数只能是可序列化的值（对象、字符串、数字等），不能传函数、DOM 节点或 undefined
- 示例：父页发消息给 iframe：iframe.contentWindow.postMessage({type: 'init', theme: 'dark'}, 'https://child.com')
接收消息后如何安全响应？
子页面收到消息后，如需回传结果，应使用 event.source.postMessage()，而不是硬编码 window.parent：
立即学习“Java免费学习笔记（深入）”；
- event.source 自动指向发送方窗口，天然适配嵌套多层或被其他页面嵌入的场景
- 响应时同样要校验 event.origin，防止伪造消息
- 可在响应中附带唯一 id 或时间戳，便于父页做请求-响应匹配（类似简易 RPC）
- 不要在 message 回调里直接操作可能不存在的 DOM，先检查 event.source 是否有效
