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

Time2020512024-02-05 10:27

父 => 子

父项目

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;
});