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

相关推荐
前端 贾公子12 分钟前
Monorepo + vite 怎么热更新
前端
coding随想21 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB242 小时前
html复习
javascript·microsoft·html