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;
});
相关推荐
Wiktok3 天前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
Wiktok3 天前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
Wiktok4 天前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
知识分享小能手5 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Wiktok5 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
Jinuss6 天前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
知识分享小能手6 天前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
哆啦A梦15886 天前
uniapp分包实现
前端·vue.js·uni-app·vue3
叫我阿柒啊7 天前
从Java全栈到前端框架的实战之路
java·数据库·微服务·typescript·前端框架·vue3·springboot
朝阳397 天前
vue3图标终极方案【npm包推荐】vue3-icon-sui(含源码详解)
npm·vue3·图标组件