频道栏目
首页 > 资讯 > JavaScript > 正文

跨iframe通信方案

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

当在一个页面中,有通过iframe嵌入的新的window时,如果想实现两个window之间的通信,会可能涉及到跨域的问题,直接访问肯定是被禁止的。使用postMessage就可以安全的绕过这些限制,实现通信。

本文通过一个简单的demo,演示下postMessage如何使用,以及其中要注意的几个问题。

参数parameters

message

需要发出的信息,类型为string 对象或者其他

targetOrigin

协议+主机+端口号,作为信息接收端的URL值,只有window的域名和端口号完全和此匹配的时候,信息才能发出去。如果将此值设为*,表示任意域名的window都能接收到此消息,但是出于安全考虑,通常不建议这么做

关于postMessage方法的调用者,需要注意的是:

调用者为需要接收消息的window对象,也就说谁调用该方法,谁就接收信息。

window.open()方法返回对该window对象的引用 当使用iframe时,通过iframe的contentWindow 属性获取该iframe的window的引用。

targetWindow.postMessage('Hello World!', 'http://example.com');

事件监听函数

当postMessage 方法被成功调用的时候,在接收端会触发一个MessageEvent, 可以提前绑定一个事件监听函数,在接收到信息时,做相应的处理

//给信息接收端的window绑定事件监听
window.addEventListener('message', function(e) {
  var message = e.data;//e.data可以访问到传递来的数据信息数据
});

关于参数e

e.data 发送的数据信息 e.source 发送消息的窗口对象 e.origin 发送消息窗口的源(协议+主机+端口号)

相关TAG标签
上一篇:CSS+DIV定位分析(relative,absolute,static,fixed)
下一篇:弹性盒模型
相关文章
图文推荐

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

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