postMessage 收到消息类型 “webpackWarnings“

场景描述:

当A系统中的parent页面使用iframe内嵌C系统的child页面,并且在parent页面中通过postMessageg给child页面发送消息时,如果C系统中使用了webpack,则webpack也会给child页面发送消息 ,消息类型为webpackWarnings。那么如何使parent页面和child页面正确通信呢,主要分为以下两步。

1,parent页面要在iframe 加载完成之后,再给child页面发消息,同时约定好发送数据的格式

// parent.vue

<iframe

ref="iframeRef"

width="100%"

class="iframe-msg-content"

src="my-src"

frameborder="0"

></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

}

2,child页面监听message 事件获取来自parent页面发送的数据

// child.html最外层元素 .page-container

<div class="page-container" ref="pageContainer"></div>

<script setup lang="ts">

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>

注意:

1,postMessage 发送字符串类型的数据才能被内嵌子页面接收。

2,通过类型过滤webpack发送的消息。

相关推荐
mCell10 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip10 小时前
Node.js 子进程:child_process
前端·javascript
excel14 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel15 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼16 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping16 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙17 小时前
[译] Composition in CSS
前端·css
白水清风17 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix17 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780017 小时前
new、原型和原型链浅析
前端·javascript