iframe的postmessage用法

使用postMessage方法可以实现跨域通信，它可以在不同的窗口或框架之间传递消息。要使用postMessage方法，需要指定消息内容和目标窗口的origin（消息发送方的源）。

在iframe中向上级窗口发送消息，可以使用以下代码：
window.parent.postMessage("发送的消息内容", "目标窗口的origin");

在上级窗口接收消息，可以通过添加一个事件监听器来处理消息：
window.addEventListener("message", function(event) {
// 处理接收到的消息
var message = event.data;
// ...
});

在iframe中向指定的子级窗口发送消息，可以使用以下代码：
window.frames['iframe名称'].postMessage("发送的消息内容", "目标窗口的origin");

在子级窗口接收消息，可以通过添加一个事件监听器来处理消息：
window.addEventListener("message", function(event) {
// 处理接收到的消息
var message = event.data;
// ...
});

请注意，由于安全原因，目标窗口的origin必须与消息发送方的origin匹配，否则消息会被浏览器阻止。

以上是使用postMessage方法进行父子窗口间或跨域通信的基本用法。具体的实现可能因具体情况而有所差异，请根据自己的需求进行调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [[前端] iframe及postMessage使用解析](https://blog.csdn.net/u010081689/article/details/48027537)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [iframe跨域通信传递数据笔记 postMessage](https://blog.csdn.net/kfepiza/article/details/121882173)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]