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

本文主要是介绍iframe通信，window.postMessage父子项目数据通信，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

父 => 子

父项目

 <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要传递的数据")),},},"*");}
};

子项目

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

子 => 父

子项目

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

父项目

 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相关的警告信息

window.addEventListener('message', event => {// 确保消息来源可信// 例如可以检查消息的来源是否是你所期望的主框架的URL// 然后再处理接收到的数据if (event.origin !== 'http://expected-source.com') {return; // 消息来源不是你所期望的，忽略}// 处理收到的数据const receivedData = event.data;
});