之前遇到一个集成别人系统内容的情况,就是弹出框内展示的是别的系统的一个模块,那个模块里面点击保存的时候需要关闭弹出框,这个就牵扯到了页面中的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,记录完成!各位大神如果有更好的方式可留言/评论告知一下。谢谢!