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发送的消息。

相关推荐
超人不会飛6 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦9 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想12 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
The_cute_cat13 分钟前
JavaScript的初步学习
开发语言·javascript·学习
海天胜景16 分钟前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
今晚打老虎z20 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982425 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴31 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干34 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗36 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端