postMessage 收到消息类型 “webpackWarnings“

简介: 【7月更文挑战第30天】

场景描述:
当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

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

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

相关文章
|
前端开发
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
477 0
|
JavaScript 前端开发 API
core-js介绍及安装使用
core-js介绍及安装使用
core-js介绍及安装使用
|
机器人 异构计算
10分钟,用RAG搭建专业钉钉/飞书客服机器人
只需10分钟,快速搭建专属客服机器人,大幅提升工作效率!通过魔搭社区注册账号、绑定阿里云账号获取免费算力资源,并选择GPU模式运行教程脚本。按照食用指引操作,完成机器人部署并进行对话测试,前5位在评论区提交作业的用户将获赠魔搭社区时尚咖啡杯一个。立即点击教程脚本链接开始体验吧!
392 0
postMessage 收到消息类型 “webpackWarnings“
postMessage 收到消息类型 “webpackWarnings“
|
小程序 容器
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
echarts 图表解决X轴加滚动条之后文字过多不显示问题
echarts 图表解决X轴加滚动条之后文字过多不显示问题
521 0
ElementUI MessageBox 防止多次弹框
项目使用 axios 拦截器进行接口响应判断处理,通过判断返回的 code 验证用户 token 是否过期,或者 token 无效, 使用 Element MessageBox 弹框提示。
1049 0
ElementUI MessageBox 防止多次弹框
|
JavaScript
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
567 0
|
Linux
初学[linux]基础命令“ls,cd,pwd,mkdir“
初学[linux]基础命令“ls,cd,pwd,mkdir“
342 1
|
内存技术
设置node默认版本—踩坑
设置node默认版本—踩坑
1036 0