跨iframe通信方案

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