zoukankan      html  css  js  c++  java
  • 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(); //调用方法
  • 相关阅读:
    Google服务
    Duwamish深入剖析配置篇
    Duwamish Online SQL XML 分类浏览
    数据库操作类
    搜索引擎Google的小秘密
    微软.NET经典架构例程Duwamish 7.0分析
    一个ASP.NET中使用的MessageBox类
    轻松解决页面回传后页面滚动到顶端
    Duwamish 7 初探——数据流程
    使用ADO.NET的最佳实践
  • 原文地址:https://www.cnblogs.com/katydids/p/11761408.html
Copyright © 2011-2022 走看看