postMessage解决跨域问题
html5有了很多新的功能，解决了以前很多一些很纠结的问题，比如说跨域访问数据，html5中就有了postMessage来解决了这一问题，它提供的api也一样简单易用。
我们可以在主页面中发送消息给不同域的iframe信息，也可以在不同域的iframe之间传输数据。利用postMessage来发送数据，用onMessage来监听数据。就像webWorker一样，它的api跟postMessage很相似。
处理主页面跟iframe之间的数据传输，我们的代码应该像下面这样：
主页面代码为如下：
window.frames[0].postMessage(msg, '*');
iframe中的代码监听发送来的消息如下：
function onmessage(e) {
//todo...
}
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}
当然两边也可以互传消息和互相监听事件。添加对应的代码即可。
如果是处理主页面中包含的两个不同域iframe,方式也十分简单，只要能够获取的到页面的对应iframe对象即可。通过window.parent.frames['iframe id']或者window.parent.frames[index]取得对应的iframe,然后对该iframe绑定postMessage.
window.parent.frames[0].postMessage(msg, '*');
window.addEventListener('message', function(e){
console.log(e.data);
});
在上面的postMessage中接收两个参数，一个是传递的信息，另一个是域名限制，如果允许任何域名访问的话，那就使用*号，如果希望限制在某个域中的话，就将*号改为对应的域名，比如：
window.parent.frames[0].postMessage(msg, 'http://www.xx.com');
对应的在onmessage回调函数中，我们可以通过e.origin来获得他的限制域名，并通过判断来决定如何访问，或不能访问。
function onmessage(e){
if (e.origin !== 'http://www.xx.com') return;
//....
}
文章原始出处：http://www.36ria.com/3890