爱站网排行榜,怎么建设个人主页网站,广东建设教育协会网站,有趣网站开发父 子
父项目 iframe:srccockpitUrlidcockpitIframeloadhandleLoad /iframe// 向子系统传递数据#xff08;注意要再iframe的load中注册#xff0c;保证iframe已经加载完成#xff0c;这样子项目才能监听到…父 子
父项目 iframe:srccockpitUrlidcockpitIframeloadhandleLoad /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;
});
