首页 > 程序开发 > 综合编程 > 其他综合 >

使用postMessage

2017-02-18

使用postMessage今天项目中新需求 需要两个页面之间相互通信 所以想到了postMessage 去了解下 原本以为是两个独立窗口都可以进行通信。

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

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

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

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

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

主窗口

window.onload=function(){

			var s=window.open("https://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。

相关文章
最新文章
热点推荐