使用 postMessage_如何知道 postmessage 是否成功-CSDN博客

本文链接：https://blog.csdn.net/luoqiang0831/article/details/51076964

本文探讨了如何使用postMessage实现跨域通信，重点介绍了通信的前提条件以及具体操作方式，包括主窗口与子窗口之间的通信，以及通过iframe或超链接打开窗口进行通信的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天项目中新需求需要两个页面之间相互通信所以想到了postMessage 去了解下原本以为是两个独立窗口都可以进行通信比如http://172.16.82.22:8080/发送一条消息给http://172.16.82.22:8081/(因为端口不同已经跨域) 结果代码运行接收方一点反应都没有，后来去网上查找了下这样通信是肯定不成功的

原来两个窗口能通信的前提是，一个窗口以iframe的形式存在于另一个窗口，或者一个窗口是从另一个窗口通过window.open()或者超链接的形式打开的（同样可以用window.opener获取源窗口）

里面的参数主要
source – 消息源，消息的发送窗口/iframe。

origin – 消息源的URI(可能包含协议、域名和端口)，用来验证数据源。
data – 发送方发送给接收方的数据。

下面是window ->window的操作方式

主窗口

window.onload=function(){

			var s=window.open("http://172.16.82.22:8081/")

			setTimeout(function(){

				s.postMessage('getcolor','*');//需要保留打开窗口句柄
				
				console.log("发送成功")

			},5000)
		}

子窗体

window.onload=function(){
window.addEventListener('message',function(e){
           
           console.log(e)
           
        },false);

		
	}

当然如果通过上述操作父子之间都可以相互传递 e.source.postMessage('数据已经收到', '*');

如果是iframe先获取iframe 在发送window.frames[0].postMessage
这是接收到的：