使用 postMessage

今天项目中新需求 需要两个页面之间相互通信 所以想到了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
这是接收到的：