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

相关推荐
daols885 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖7 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖7 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台8 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue