使用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。