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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50663.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十九章 等待队列

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

右手系转Unity左手系坐标系

右手系转Unity左手系坐标系 inline Sophus::SE3d TransformRightPoseToLeftUnity(const Sophus::SE3d &pose) {Eigen::Matrix4d T_wl_wr, T_br_bl;T_wl_wr.setZero();T_wl_wr(0, 0) 1.0;T_wl_wr(1, 2) 1.0;T_wl_wr(2, 1) 1.0;T_wl_wr(3, 3) 1.0;T_br_bl.setZero();T_b…

电力系统 | 发电、输电、变电、配电、用电介绍 | 一度电从电厂发出来到用户终端需要经历哪些环节 | 变电站建在哪里

文章目录 一、一度电从电厂发出来到用户终端需要经历哪些环节&#xff1f;二、发电、变电、输电、配售电和用电过程介绍三、变电站建在哪里&#xff1f; 一、一度电从电厂发出来到用户终端需要经历哪些环节&#xff1f; 电力系统是由发电、变电、输电、配售电和用电等环节组成的…

《路过人间》好好听,歌词也戳人

嘿 意不意外 她背影 那么轻快 嘿 要明白 人会来 就会离开 世上唯一不变 是人都善变 路过人间爱都有期限 天可怜见 心碎在所难免 以为痛过几回 多了些修炼 路过人间就懂得防卫 说来惭愧人只要有机会 就又沦陷 嘿 别再猜 她可曾 想过回来 嘿 醒過來 你很好 她也不壞 快快抹干…

阿里云服务器 篇六:GitHub镜像网站

文章目录 系列文章搭建镜像网站的2种方式使用 Web 抓取工具 (Spider 技术)使用 Web 代理服务器使用 nginx 搭建GitHub镜像网站基础环境搭建添加对 github.com 的转发配置添加对 raw.githubusercontent.com 的转发配置配置更改注意事项(可选)缓存优化为新增设的二级域名配置DN…

leetcode106. 从中序与后序遍历序列构造二叉树,力扣105姊妹题

leetcode106. 从中序与后序遍历序列构造二叉树 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…

活动报名小程序

#活动报名工具# # 活动报名小程序 ## 项目简介 一款通用的活动报名工具&#xff0c;包含活动展示&#xff0c;微信支付&#xff0c;订单管理&#xff0c;分享评价等功能。 品客聚精彩&#xff0c;有你才精彩&#xff01;不只有线下活动还可以进行线上裂变活动。 …

UE4-构建光照后导入的静态网格体变黑

当我们将我们的静态网格体导入到项目当中的时候&#xff0c;此时我们进行重新构建光照&#xff0c;我们在从新构建完光照后&#xff0c;会发现我们的静态网格体全部变黑了&#xff0c;此时是因为没有设置光照贴图分辨率和坐标索引引起的。 将General Settings中的L…

Cmake生成的Xcode工程相对路径与绝对路径的问题

Cmake生成的Xcode工程相对路径与绝对路径的问题 文章目录 Cmake生成的Xcode工程相对路径与绝对路径的问题前言修改.pbxproj文件验证工程小结 前言 由于Cmake的跨平台的自动化构建的方便性以及他广泛应用于编译过程的管理&#xff0c;在开发过程中难免用到Cmake。我也使用Cmake…

framework直播学习笔记--安卓如何实现Launcher启动应用全部变自由窗口Freeform模式

背景&#xff1a; 前些天在学员在学员群里有聊到一个需求&#xff0c;那就是把手机桌面点击应用图标后&#xff0c;不是进行全屏显示&#xff0c;而是都进行自由窗口显示。这个其实有点类似我们windows电脑打开app&#xff0c;每个app都是一个非全屏的窗口&#xff0c;而且可以…

从 Batch Norm 到 SGD 隐藏的内容

我们仍然不了解机器学习的哪些方面 欢迎来到雲闪世界。令人惊讶的是&#xff0c;机器学习中的一些基本主题仍然不为研究人员所知&#xff0c;尽管它们很基础且常用&#xff0c;但却似乎很神秘。机器学习的有趣之处在于我们构建了可以工作的东西&#xff0c;然后弄清楚它们为什么…

Vue中 watch 与 watchEffect 的区别

Watch 默认是懒侦听&#xff0c;即仅在侦听源发生变化时才执行回调函数。只追踪明确定义的数据源&#xff0c;不会追踪在回调中访问到的东西可以访问侦听数据的新值和旧值。总共接收三个参数&#xff0c;侦听数据源、回调函数和配置选项。 const x ref(1) const y ref(1) c…

硅纪元视角 | 摩根大通拥抱AI:LLM Suite开启金融行业新篇章!

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展&#xff0c;捕捉行业动态&#xff1b;提供深入的新闻解读&#xff0c;助您洞悉技术背后的逻辑&#xff1b;汇聚行业专家的见解&#xff0c;…

华为OD机试 - 计算三叉搜索树的高度 (python 2024年C卷D卷)

华为OD机试&#xff08;C卷D卷&#xff09;2024真题目录(Java & c & python) 题目描述 定义构造三叉搜索树规则如下&#xff1a; 每个节点都存有一个数&#xff0c;当插入一个新的数时&#xff0c;从根节点向下寻找&#xff0c;直到找到一个合适的空节点插入。查找的…

【字母异位词分组】python刷题记录

R2-字符串篇 class Solution:def groupAnagrams(self, strs: List[str]) -> List[List[str]]:#哈希表分组#把每种字母出现次数相同的字符串分到同一组#sort一下好像能分dictdefaultdict(list)for s in strs:asorted(s)#sorted(s)相同的字符串分到同一组dict[.join(a)].appen…

Java 基础 and 进阶面试知识点(超详细)

一个 Java 文件中是否可以存在多个类&#xff08;修饰类除外&#xff09;&#xff1f; 一个 Java 文件中是可以存在多个类的&#xff0c;但是一个 Java 文件中只能存在一个 public 所修饰的类&#xff0c;而且这个 Java 文件的文件名还必须和 public 所修饰类的类名保持一致&a…

如何应对零日威胁:漏洞扫描

零日威胁正变得比以往任何时候都更加危险。5月底至6月初&#xff0c;恶意行为者通过零日攻击接管了众多名人和品牌的TikTok账户。用户声称在打开一条私信后便丧失了账户的控制权。而用于攻击的恶意软件能够在用户不下载或安装任何程序的情况下感染设备。 目前尚不清楚此次事件的…

linux系统巡检及shell脚本

目录 步骤1 系统巡检基本命令 CPU 内存 磁盘 进程 网络、流量 步骤2 shell脚本编写 awk awk常用内置变量 awk正则 实例一 实例二 实例三 实例四 实例五 sed 选项与参数 例一 例二 例三 例四 例五 例六 例七 grep 主要参数 常用用法 例一 例二 例三…

vue 开发环境配置

1. nvm 安装 在 github上下载 最新的 nvm 包 https://github.com/coreybutler/nvm-windows/releases或者在 csdn 上下载&#xff08;从github上迁移&#xff0c;方便下载&#xff09;https://download.csdn.net/download/u011171506/89585197 下载后不用修改任何配置&#x…

2024年第三届钉钉杯大学生大数据挑战赛初赛题目A题

初赛A&#xff1a;烟草营销案例数据分析 一、问题背景: 烟草是我国重要的国家税收和财政收入来源。在现有市场中占有极为稳定的根基。据统计&#xff0c;近年来我国卷烟销售收入逐年增长。现在国家对烟草实行专卖制度&#xff0c; 对烟草专卖品的生产、销售、进出口依法实行专卖…