iframe子父页面信息传递与监听

子页面向父页面发送消息，父页面接收消息

//子页面发送:
window.parent.postMessage({
    param:"121121",
    msg:"success"
},"*");
//父页面监听：
window.addEventListener("message", function(event){
    var data = event.data;
    //data.param == "121121" 、data.msg == "success";
})

这个postMessage里面的对象不是固定的数据格式，可以是msg、也可以是code等等，父页面获取的方式跟子页面设定的key保持一致就可以取到对应的值；反之，父页面同样可以发送，子页面去监听，如下所示：

//父页面发送：
$("#mapIframe")[0].contentWindow.postMessage({
    module: "yxtz",
    param: "sl_btn_sw"
},"*");
//子页面监听：
window.addEventListener("message", function(event) {
    var data = event.data;
    //以下内容为处理业务和调用当前页面的函数方法
    if(data.module == "yxtz"){
        changeMapShowInfo(data.param);
    }
});

父页面可以直接调用子页面的函数，所以可以直接操作，并不需要消息监听。需要明确哪个iframe并指向contentWindow；至此，页面中的监听方式的子父页面消息传递就完成了，同时补充一点：父页面调用子页面中的带参函数，代码如下：

//子页面js（子页面的函数不包含在$(function(){})中的方式）：
var testIframe = function(param) {
    alert(param);
}
//父页面调用：
//frame1对应iframe的id
document.getElementById("frame1").contentWindow.testIframe("121212");