当在一个页面中,有通过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
发送消息窗口的源(协议+主机+端口号)