postMessage 页面跨域与iframe通信

解决跨域问题的方法大致有以下几种

　　1.jsonp   

　　2.hash

　　3.postMessage

　　4.websocket

　　5.cors 

　　具体的使用方式和原理的文章有很多，而就应用场景而言，iframe间通信最完美的办法莫过于postMessage了。

　　postMesasge是html5标准的方法，ie10+浏览器都支持，ie8/9部分支持。以下是部分实例：

//主页面 向 iframe传递事件

//主页面

var frame = document.getElementById('iframeId');

// postMessage接收两个参数，第一个表示信息，可以传递字符串或者对象，我用的对象。refresh 是目标页面监听事件的key,对象内可以传递多个key;第二个参数表示目标源，*表示所有，但不安全，建议使用具体地址
frame.contentWindow.postMessage({refresh：'id'},'*'); 

//iframe页面
window.addEventListener('message',function(event){
　　// event.origin --发送者的源
　　// event.source --发送者的window对象
　　// event.data --数据
　　if(event.data.refresh){
　　　　//此处执行事件

   }

})

 

//iframe向主页面传递事件

//iframe页面
window.parent.postMessage({refresh:'id'},'*');

//主页面
window.addEventListener('message',,function(event){
     if(event.data.refresh){
　　　　//此处执行事件
    }
})

 

新开页面时也能用这个方式向父页面传递事件（ie8/9不支持）

window.opener.postMessage({refresh:'some message'},'*')