做公司网站的服务费入什么费用,怎么制作链接,网站开发发现趋势,北京大良网站建设场景描述#xff1a; 当A系统中的parent页面使用iframe内嵌C系统的child页面#xff0c;并且在parent页面中通过postMessageg给child页面发送消息时#xff0c;如果C系统中使用了webpack,则webpack也会给child页面发送消息 #xff0c;消息类型为webpackWarnings。那么如何…场景描述 当A系统中的parent页面使用iframe内嵌C系统的child页面并且在parent页面中通过postMessageg给child页面发送消息时如果C系统中使用了webpack,则webpack也会给child页面发送消息 消息类型为webpackWarnings。那么如何使parent页面和child页面正确通信呢主要分为以下两步。
1parent页面要在iframe 加载完成之后再给child页面发消息同时约定好发送数据的格式 // parent.vue iframe refiframeRef width100% classiframe-msg-content srcmy-src frameborder0 /iframe script setup import {onMounted, onUnmounted} from vue; onMounted((){ iframeRef.value.onload () { // iframe 加载完成之后获取iframe 内嵌子页面窗口 const childWindow iframeRef.value.contentWindow; const messageData { type: 约定的消息类型, data: 要发送的数据, }; // postMessage 发送字符串类型的数据才能被目标窗口接收 childWindow.postMessage(JSON.stringify(messageData), ip端口); }; window.addEventListener(message, handleMessage, false); }); onUnmounted(() { window.removeEventListener(message, handleMessage, false); }); /script // 先给一个默认的宽高 .iframe-msg-content{ width: 100%; height: 400px } 2child页面监听message 事件获取来自parent页面发送的数据 // child.html最外层元素 .page-container div classpage-container refpageContainer/div script setup langts import {ref,reactive, onMounted, onUnmounted} from vue; const pageContainer ref(); const state reactive({ }) /** * description: 消息处理 * return {*} */ const handleMessage (event:MessageEvent) { // 因为webpack 发送的数据是对象类型parent 页面发送的是经过JSON.stringify转换的字符串类型的 // 过滤来自webpack发送的possMessage 消息 if (Object.prototype.toString.call(event.data) [object String]) { const message JSON.parse(event.data); if (message?.type 约定好的数据type) { // 处理来自parent 页面的数据 } } }; onMounted((){ window.addEventListener(message, handleMessage); }) onUnmounted(() { window.removeEventListener(message, handleMessage); }); /script 注意
1postMessage 发送字符串类型的数据才能被内嵌子页面接收。
2通过类型过滤webpack发送的消息。
