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

相关文章
window.scrollTop 不生效的原因,如何解决
window.scrollTop 不生效的原因,如何解决
1206 0
|
存储 Oracle 关系型数据库
Docker-14:Docker安装Oracle11g
Docker 安装 Oracle
4546 1
Docker-14:Docker安装Oracle11g
|
存储 编解码 前端开发
React 视频上传组件 Video Upload
随着互联网的发展,视频内容在网站和应用中愈发重要。本文探讨如何使用React构建高效、可靠的视频上传组件,涵盖基础概念、常见问题及解决方案。通过React的虚拟DOM和组件化开发模式,实现文件选择、进度显示、格式验证等功能,并解决跨域请求、并发上传等易错点。提供完整代码案例,确保用户能顺畅上传视频。
726 92
|
缓存 JavaScript 前端开发
Vue项目卡顿慢加载?这些优化技巧告诉你!(一)
Vue项目卡顿慢加载?这些优化技巧告诉你!
6109 0
|
存储 索引
antd中table组件选中单行换样式(比如背景颜色)
在Ant Design (antd)的Table组件中,可以通过设置`onRow`属性来定义行点击事件,从而改变被点击行的样式,如背景颜色。`onRow`是一个函数,返回一个对象,对象包含事件处理函数,如`onClick`。同时,使用`rowClassName`属性来指定行的类名,结合状态管理,可以实现点击某行后改变其背景颜色的效果。具体实现时,需要在组件状态中保存当前被点击行的索引,然后通过`rowClassName`判断并返回相应的类名。
1965 2
antd中table组件选中单行换样式(比如背景颜色)
|
前端开发 JavaScript 开发者
深入理解JavaScript中的Promise:用法与最佳实践
【10月更文挑战第8天】深入理解JavaScript中的Promise:用法与最佳实践
1647 0
|
JSON 小程序 数据格式
uni-app 使用vscode开发uni-app
uni-app 使用vscode开发uni-app
1764 0
Error: Cannot find module ‘node:url‘【已解决】
Error: Cannot find module ‘node:url‘【已解决】
1473 3
|
Linux
初学[linux]基础命令“ls,cd,pwd,mkdir“
初学[linux]基础命令“ls,cd,pwd,mkdir“
767 1
|
JavaScript
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
956 0