其他分享
首页 > 其他分享> > 页面监听-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,记录完成!各位大神如果有更好的方式可留言/评论告知一下。谢谢!

标签:子父,param,监听,iframe,data,event,页面
来源: https://www.cnblogs.com/superfeeling/p/14748371.html