2025年iframe通信postmessage（2025年iframe发送post请求）
怎么使用postMessage进行通信
1、发送消息：使用 targetWindow.postMessage 方法。targetWindow：目标窗口对象，可以是 window.open 创建的窗口，或是 window.frames 的成员。message：要发送的数据，可以是字符串、对象等。targetOrigin：目标窗口的来源，用于指定哪些窗口可以接收消息。
2、当前窗口与新打开窗口之间的通信：在打开新窗口时，可以使用window.open方法，并保存返回的窗口对象。通过保存的窗口对象，可以使用windowObject.postMessage方法向新窗口发送消息。新窗口同样通过监听message事件来接收消息，并作出相应的处理。
3、通过在不同窗口之间使用 postMessage，在上篇中我们已经着重讲述了，这里我们主要讲在Web Worker中如何使用postMessage进行通信。
4、“postMessage”方法允许向其他窗口发送消息，方法接收一个参数：目标窗口（目标窗口可以是通过`window.open`方法创建的窗口，或是`window.frames`属性的成员）。数据传输过程简便，只需调用此方法即可。接收消息时，通过监听“message”事件实现。
5、这个方法就没法使用了。window对象有一个postMessage方法。正确使用时，能安全的实现两个不用浏览器标签页通信。现实中打开一个新标签窗口到完成渲染是需要一定的时间的，如果过早使用了postMessage方法，onmessage会无法监听到数据。所以这里结合来使用，在新的标 签窗口渲染完了，通知一下源标签窗口。
js跨域获取iframe内容
1、在JavaScript中，跨域获取iframe内容由于浏览器的同源策略限制，直接访问是不允许的，但可以通过使用postMessage API、服务器端代理、设置document.domain、跨域资源共享（CORS）等方法实现。 使用postMessage API：这是一种HTML5引入的跨文档通信的安全方法。
2、Runtime之间互操作（或者通信）是有跨域限制的。也就是说，如果这个窗口本身是a.baidu.com域名下的页面，那么如果这个页面下还有一个iframe，这个iframe中加载的页面是b.baidu.com域名下的。那么外层的JS。就不能跟这个iframe中的内容互操作（或者通信）。
3、浏览器设置有同源策略，这使得跨域操作在技术上显得比较复杂。例如，我们之前的一个项目中，项目经理提出希望利用JavaScript跨域访问iframe中的内容，但最终这个想法被放弃了。这背后的原因其实很简单，如果我们能够通过JavaScript跨域获取iframe内的信息，将带来严重的安全隐患。
4、在JavaScript中，要获取iframe框架中某个元素的值，可以使用document.getElementById方法。具体操作为：先通过iframe的srcDocument属性访问iframe内部的DOM文档，然后使用getElementById方法找到目标元素，最后调用该元素的value属性获取其值。
5、获取iframe元素，JavaScript提供了一种简便方法。利用`contentWindow`属性获取iframe中的window对象，`contentDocument`属性获取iframe中的document对象。以此为基础，执行常规的DOM操作以查找iframe中的元素。不过，需注意安全限制。
postMessage使用
postMessage 是 HTML5 引入的一项 API，用于实现跨文档消息传输。它允许在不同的窗口之间安全地发送消息，即使这些窗口来自不同的源。使用方法：发送消息：使用 targetWindow.postMessage 方法。
postMessage适用于需要在不同来源的页面之间传递数据的场景，如跨域通信、父子页面协作等。它可以用于实现页面间的实时数据同步、状态共享等功能。通过使用postMessage API，开发者可以轻松地实现页面间的跨域通信，提高应用的交互性和用户体验。
第一步：分发消息，及把消息发送给相应的窗口 otherWindow.postMessage（message， targetOrigin， transfer）； otherWindow ：你要发送消息给哪个窗口就是哪个窗口的引用，注意不是当前窗口，可以是iframe的窗口对象，或者是window.open返回的窗口对象。如果获取不到otherWindow是没法对相应的窗口发送信息的。
使用postMessage在window.open（）中的使用 第一种方式，两个页面之间数据的相互传递 第二种方式：通过事件传递 父页面数据传递方式：setTimeout（function（） { window.opener.postMessage（{ isColse： ok }， *）；}， 2000）到此这篇postMessage的两种使用方式的文章就介绍到这了。
postMessage 是一种在不同窗口之间进行通信的基本机制。它适用于以下场景：通过在不同窗口之间使用 postMessage，在上篇中我们已经着重讲述了，这里我们主要讲在Web Worker中如何使用postMessage进行通信。