有关html5的postMessage跨域发送消息

昨天在项目中遇到一个问题，需要在主页面把数据传递给iframe的页面，同时需要iframe在进行操作之后把数据传递给主页面，之前想的是用隐藏域的方法，但终究没有实现，后来发现用html5中的postMessage能够很好的实现这个功能，详解如下：

主页面发送消息到iframe页面：（通过监听message来接受iframe发送过来的数据，通过postMessage来发送数据给iframe）

window.addEventListener("message",function(e){
// debugger;
var data= e.data;
//该data为提交的表单数据，可把该表单的数据进行操作，显示在页面上
});
// debugger;
var firame=document.getElementById("popIframe").contentWindow;//必须是contentWindow对象
firame.postMessage("getValue","*");//向iframe发送数据，iframe中同样使用监听message来接受数据，*表示可以传递给任意窗口

子页面接受消息：（同样通过监听message来接受消息，并把需要的数据通过postMessage发送给父页面）

window.addEventListener("message",function(e){
// debugger;
var data= e.data;
if(data=="getValue"){
var _data=getData();
parent.postMessage(_data,"*");//把数据传递给父级
}
});

postMessage的操作简要来说就是这样，虽然很简单，但却解决了我的大问题，故在此总结一下

有关参数e:

简要说明一下：

data:发送的数据

origin:发送消息窗口的源

source:发送消息的窗口对象

postMessage不仅可以在iframe中传递数据，另外常用的使用场景还有例如页面与打开的新窗口的数据传递，多个窗口的数据传递等等

参考网址：

http://www.cnblogs.com/dolphinX/p/3464056.html