postmessage跨窗口跨域

跨域，是web开发过程中遇到的经典问题，html5草案里已有兼顾安全性的跨域方案，即postMessage。

不过遗憾的是并不是所有浏览器都支持它，IE8是有bug的支持，IE8.0以下版本则不支持，IE9和其它现代浏览器已支持。

其关键的代码为：

1. 取到window对象的引用，例如iframe.contentWindow或者通过window.open打开的新窗口
   iframe.contentWindow
2. 调用window.postMessage(data,targetOrigin)方法，targetOrigin是指定向某个特定origin的窗口发送数据,之后，指定的origin窗口会触发一个事件，messageEvent
   window.postMessage(data,targetOrigin)
3. 在该window对象的绑定messageEvent侦听器
   window.addEventListener("message",handler,bubble)

发送端

接收端

waiting message...
 
 

效果如下：

点击发送即可向跨域的iframe或者新窗口发送消息。

参考资料：

1. John Resig:Cross-Window Messaging
2. MSDN:postMessage Method
3. EricLaw:IE8的问题
4. Jakob Heuser:IE8问题的解决方案