iframe通信,window.postMessage父子项目数据通信

父 => 子

父项目

javascript 复制代码
 <iframe
      :src="cockpitUrl"
      id="cockpitIframe"
      @load="handleLoad" 
	></iframe>

// 向子系统传递数据(注意要再iframe的load中注册,保证iframe已经加载完成,这样子项目才能监听到)
const handleLoad = () => {
  const iframe: any = document.getElementById("cockpitIframe");
  if (iframe.contentWindow) {
    iframe.contentWindow.postMessage(
      {
        type: "on-cockpit",
        data: {
          userInfo: JSON.parse(JSON.stringify("obj要传递的数据")),
        },
      },
      "*"
    );
  }
};

子项目

javascript 复制代码
  window.addEventListener("message", (event) => {
    const data = event.data;
    if (data.type) {
        case "on-cockpit":
        //这里就可以拿到父项目传递的数据
        break;
      }
    }
  });

子 => 父

子项目

javascript 复制代码
 window.parent.postMessage(
    {
      type: "skip-cockpit",
      payload: JSON.parse(JSON.stringify("要传递给父项目的数据")),
    },
    "*"
  );

父项目

javascript 复制代码
 window.addEventListener("message", (event) => {
    const data = event.data;
    if (data.type) {
      switch (data.type) {
        case "skip-cockpit":
          //这里就可以拿到子项目传递过来的数据
          break;
      }
    }
  });

如果你在子项目中使用 window.addEventListener('message', ...) 来监听消息,但收到的 event.data 类型是 "webpackWarnings",这可能是因为你的监听器在Webpack开发服务器的环境下也会接收到一些Webpack相关的警告信息

javascript 复制代码
window.addEventListener('message', event => {
  // 确保消息来源可信
  // 例如可以检查消息的来源是否是你所期望的主框架的URL
  // 然后再处理接收到的数据
  if (event.origin !== 'http://expected-source.com') {
    return; // 消息来源不是你所期望的,忽略
  }
  
  // 处理收到的数据
  const receivedData = event.data;
});
相关推荐
叫我阿柒啊2 天前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
叫我阿柒啊3 天前
从Java全栈到Vue3实战:一次真实面试中的技术探索
java·数据库·spring boot·微服务·typescript·vue3·restful
叫我阿柒啊3 天前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
叫我阿柒啊4 天前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
叫我阿柒啊4 天前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api
叫我阿柒啊4 天前
从Java全栈到前端框架:一次真实的面试对话
java·spring boot·微服务·前端框架·vue3·全栈开发
叫我阿柒啊4 天前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
Lsx-codeShare5 天前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·javascript·echarts·vue3·数据可视化
叫我阿柒啊5 天前
从全栈开发到微服务架构:一位Java工程师的实战经验分享
java·ci/cd·kafka·mybatis·vue3·springboot·fullstack
叫我阿柒啊5 天前
Java全栈工程师的面试实战:从基础到复杂问题的完整解析
java·数据库·spring boot·微服务·vue3·测试·全栈开发