频道栏目
首页 > 资讯 > 其他综合 > 正文

使用postMessage

17-02-18        来源:[db:作者]  
收藏   我要投稿

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

相关TAG标签
上一篇:前端开发——滚滚屏(没有纵向滚动条)
下一篇:前端技术小讲
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站