iframe父子页面通讯

Posted katydids

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe父子页面通讯相关的知识,希望对你有一定的参考价值。

由于公司的service后台,是前端搭的架子,里面各个tab菜单栏都是不同的工程,通过iframe来嵌套,在业务越来越复杂的情况下,总是避免不了iframe之间的通讯,

下面是两种iframe之间的通讯:

 

1、父子iframe通过监听来实现

在iframe的子页面里使用postMessage向父级页面传参:

 

window.parent.postMessage({type: "closeIbooking", fromSource: "turnoffIbooking"}, "*");

 


在父级页面里监听message,在监听到相应的信息之后就可以执行所要执行的函数了,这样就可以子组件向父组件通信啦:

// 监听ibooking传来的message
window.addEventListener("message", (e)=> {
    let {type, fromSource} = e.data;
    let newIframeInfo = {
        ibookingURL: "",
        ibookingVisible: false,
        relation: ‘‘,
        ProductNo: ‘‘,
    };
    if(type === "closeIbooking") {
        switch (fromSource) {
            case "productRecommend":
                addTag();  // 在收到这个message的时候要触发的函数
            case "orderList":
            case "turnoffIbooking":
            default:
                window.store.dispatch(update(‘customMenu‘, "ibookingController", newIframeInfo));
        }
    }
});

 

2、除此之外还可以直接调用彼此的方法及变量:
  

    1、子页面调用父页面方法
  //调用父页面方法
  window.parent.func(); //调用方法
  2、父页面调用子页面方法
  //调用子页面方法
  window.frames[iframe序号].func(); //调用方法

 

以上是关于iframe父子页面通讯的主要内容,如果未能解决你的问题,请参考以下文章

js对iframe内外(父子)页面进行操作

iframe 父子页面方法调用

iframe获取父子窗口的元素和方法

iframe父子页面通信

父子页面(iframe)相互获取对方dom元素

iframe父子页面交互