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

本文主要是介绍页面监听-iframe子父页面信息传递与监听，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

之前遇到一个集成别人系统内容的情况，就是弹出框内展示的是别的系统的一个模块，那个模块里面点击保存的时候需要关闭弹出框，这个就牵扯到了页面中的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);
    }
});

注意一点，子父页面发送的方式不太一样。一个是parent、一个是需要明确哪个iframe并指向contentWindow；至此，页面中的监听方式的子父页面消息传递就完成了，同时补充一点：父页面调用子页面中的带参函数，代码如下：

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

OK，记录完成！各位大神如果有更好的方式可留言/评论告知一下。谢谢！

这篇关于页面监听-iframe子父页面信息传递与监听的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！