当前位置： 首页 > news >正文

微前端传值

news 文章来源：https://blog.csdn.net/m0_47999208/article/details/141356551 2025/5/2 12:20:25

在微前端架构中，不同子应用之间通过 postMessage 进行通信是一种常见的做法。这种方式允许不同源的窗口之间进行安全的信息交换。

下面是如何使用 postMessage 在微前端环境中发送和接收消息的示例。

步骤 1: 发送消息

假设您有一个主应用（host app）和一个子应用（micro app）。子应用需要向主应用发送消息。

子应用代码示例：
// 子应用的 JavaScript 文件
function sendMessageToHostApp(message) {const hostWindow = window.parent; // 获取父窗口if (hostWindow && hostWindow.postMessage) {hostWindow.postMessage(message, '*'); // 发送到任何源}
}// 示例调用
sendMessageToHostApp({ type: 'GREETING', content: 'Hello from micro app!' });

步骤 2: 接收消息

接下来，您需要在主应用中监听 message 事件，以便能够接收到来自子应用的消息。

主应用代码示例：
// 主应用的 JavaScript 文件
window.addEventListener('message', function(event) {console.log('Received message:', event.data);// 检查消息来源是否可信if (event.origin !== 'http://your-sub-app-origin.com') {return;}// 处理消息switch (event.data.type) {case 'GREETING':console.log('Greeting received:', event.data.content);break;default:console.log('Unknown message type:', event.data.type);}
}, false);

注意事项：

  1. 消息来源验证:

    • 在接收到消息时，最好检查 event.origin 以确保消息来自预期的子应用。
    • 如果您的子应用部署在与主应用不同的域名上，您需要确保允许正确的源。

  2. 消息格式:

    • 使用结构化的消息格式（如 JSON 对象），以便于解析和处理。

  3. 错误处理:

    • 当发送或接收消息时，应考虑异常情况并进行适当的错误处理。

  4. 通信安全:

    • 在生产环境中，确保只信任来自安全源的消息。

示例完整代码

子应用（Micro App）
<!-- micro-app.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Micro App</title>
</head>
<body><h1>Micro App</h1><button onclick="sendMessage()">Send Message</button><script>function sendMessage() {const message = { type: 'GREETING', content: 'Hello from micro app!' };const hostWindow = window.parent;if (hostWindow && hostWindow.postMessage) {hostWindow.postMessage(message, '*'); // 发送到任何源}}</script>
</body>
</html>
主应用（Host App）
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Host App</title>
</head>
<body><h1>Host App</h1><iframe src="http://your-sub-app-origin.com/micro-app.html" width="300" height="200"></iframe><script>window.addEventListener('message', function(event) {console.log('Received message:', event.data);// 检查消息来源是否可信if (event.origin !== 'http://your-sub-app-origin.com') {return;}// 处理消息switch (event.data.type) {case 'GREETING':console.log('Greeting received:', event.data.content);break;default:console.log('Unknown message type:', event.data.type);}}, false);</script>
</body>
</html>

相关文章：

微前端传值

在微前端架构中&#xff0c;不同子应用之间通过 postMessage 进行通信是一种常见的做法。这种方式允许不同源的窗口之间进行安全的信息交换。 下面是如何使用 postMessage 在微前端环境中发送和接收消息的示例。 步骤 1: 发送消息 假设您有一个主应用&#xff08;host app&a…...

编程日记 2024/8/22 16:50:11

《学会 SpringBoot · 依赖管理机制》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…...

编程日记 2024/8/22 16:49:10

全网行为管理软件有哪些？5款总有一款适合你的企业！

如今企业越来越依赖互联网进行日常运营和业务发展&#xff0c;网络行为管理变得日益重要。 为了确保网络安全、提高员工工作效率、避免敏感信息外泄等问题&#xff0c;企业往往需要借助全网行为管理软件来监控和管理内部网络的使用情况。 本文将为您介绍五款热门的全网行为管理…...

编程日记 2024/8/22 16:47:07

以简单的例子从头开始建spring boot web多模块项目(二)-mybatis简单集成

继续使用以简单的例子从头开始建spring boot web多模块项目&#xff08;一&#xff09;中的项目进行mybatis集成。 1、pom.xml文件中&#xff0c;增加相关的依赖包的引入&#xff0c;分别是mybatis-spring-boot-starter、lombok、mysql-connector-java 如下&#xff1a; <d…...

编程日记 2024/8/22 16:46:05

Golang | Leetcode Golang题解之第354题俄罗斯套娃信封问题

题目&#xff1a; 题解&#xff1a; func maxEnvelopes(envelopes [][]int) int {n : len(envelopes)if n 0 {return 0}sort.Slice(envelopes, func(i, j int) bool {a, b : envelopes[i], envelopes[j]return a[0] < b[0] || a[0] b[0] && a[1] > b[1]})f : …...

编程日记 2024/8/22 16:44:03

jmeter中添加ip欺骗

1、首先在本机电脑中通过配置文件创建添加ip的配置文件&#xff0c;先创建一个txt格式的&#xff0c;直接修改文件名以及后缀为ips.bat 2、编辑该ips.bat文件&#xff0c;在文件中输入如下内容&#xff0c;用于快速给本机添加ip地址&#xff0c;&#xff08;2&#xff0c;1&…...

编程日记 2024/8/22 16:43:02

WPF篇（19）-TabControl控件+TreeView树控件

TabControl控件 TabControl表示包含多个共享相同的空间在屏幕上的项的控件。它也是继承于Selector基类&#xff0c;所以TabControl也只支持单选操作。另外&#xff0c;TabControl的元素只能是TabItem&#xff0c;这个TabItem继承于HeaderedContentControl类&#xff0c;所以Ta…...

编程日记 2024/8/22 16:39:28

appium下载及安装

下载地址&#xff1a;https://github.com/appium/appium-desktop/releases 双击安装就可以...

编程日记 2024/8/22 16:37:25

XSS项目实战

目录 一、项目来源 二、实战操作 EASY 1 2 3 4 5 6 7 8 一、项目来源 XSS Game - Learning XSS Made Simple! | Created by PwnFunction 二、实战操作 EASY 1 1.Easy -1 2.题目要求及源码 Difficulty is Easy.Pop an alert(1337) on sandbox.pwnfunction.com.No …...

编程日记 2024/8/22 16:36:24

SD-WAN降低网络运维难度的关键技术解析

为什么说SD-WAN&#xff08;软件定义广域网&#xff09;大大降低了网络运维的复杂性&#xff0c;主要是因为它的智能路径选择、应用识别和链路质量监测这三个核心技术。这几项在SD-WAN中尤为重要的技术&#xff0c;它们共同作用&#xff0c;提升了整体网络性能&#xff0c;为网…...

编程日记 2024/8/22 16:34:20

【算法基础实验】图论-最小生成树-Prim的即时实现

理论知识 Prim算法是一种用于计算加权无向图的最小生成树&#xff08;MST, Minimum Spanning Tree&#xff09;的贪心算法。最小生成树是一个连通的无向图的子图&#xff0c;它包含所有的顶点且总权重最小。Prim算法从一个起始顶点开始&#xff0c;不断将权重最小的边加入生成…...

编程日记 2024/8/22 16:33:16

LLama 3 跨各种 GPU 类型的基准测试

2024 年 4 月 18 日&#xff0c;AI 社区对 Llama 3 70B 的发布表示欢迎&#xff0c;这是一款最先进的大型语言模型 &#xff08;LLM&#xff09;。该型号是 Llama 系列的下一代产品&#xff0c;支持广泛的用例。该模型 istelf 在广泛的行业平台上表现良好&#xff0c;并提供了新…...

编程日记 2024/8/22 16:32:12

FreeRTOS 快速入门（五）之信号量

目录 一、信号量的特性1、信号量跟队列的对比2、两种信号量的对比 二、信号量1、二值信号量1.1 二值信号量用于同步1.2 二值信号量用于互斥 2、计数信号量 三、信号量函数1、创建2、删除3、give/take 一、信号量的特性 信号量&#xff08;Semaphore&#xff09;是一种实现任务…...

编程日记 2024/8/22 16:26:05

centos 服务器之间实现免密登录

为了在CentOS服务器之间实现免密登录&#xff0c;你需要使用SSH的公钥认证机制 比如两台centos系统的服务器A 和服务器B 首先我们实现从A服务器可以免密登录到服务器B上 首先生成公钥和秘钥&#xff1a; ssh-keygen -t rsa 生成了公钥和秘钥之后&#xff1a; ssh-copy-id r…...

编程日记 2024/8/22 16:25:04

RabbitMq实现延迟队列功能

1、rabbitmq服务端打开延迟插件 &#xff08;超过 4294967295毫秒 ≈ 1193 小时 ≈ 49.7 天 这个时间会立即触发&#xff09; 注意&#xff1a;只有RabbitMQ 3.6.x以上才支持 在下载好之后&#xff0c;解压得到.ez结尾的插件包&#xff0c;将其复制到RabbitMQ安装目录下的plug…...

编程日记 2024/8/22 16:22:01

redis内存淘汰策略

1. redis内存淘汰策略 日常常用&#xff1a;allkeys-lru&#xff1a;在键空间中移除最近最少使用的key。1.1 为什么需要使用redis内存淘汰策略? 因为我们服务器中的内存是有限的,不会无限多,所以需要对一些不常用的key进行内存清理.1.2 redis内存淘汰策略有哪些? redis默认…...

编程日记 2024/8/22 16:19:58

实时洞察应用健康：使用Spring Boot集成Prometheus和Grafana

1. 添加Prometheus和Actuator依赖 在pom.xml中添加Spring Boot Actuator和Micrometer Prometheus依赖&#xff1a; <dependencies> <!--监控功能Actuator--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring…...

编程日记 2024/8/22 16:18:57

生信圆桌x生信豆芽菜：生物信息学新手的学习与成长平台

生信豆芽菜是一个专门为生物信息学初学者创建的学习与交流平台&#xff0c;致力于帮助新手们快速入门并掌握生信分析的基础知识与技能。随着生物信息学在科研中的重要性日益提升&#xff0c;越来越多的学生和研究人员开始接触这一领域。生信豆芽菜正是为了满足这些新手的需求&a…...

编程日记 2024/8/22 16:17:56

创客匠人标杆对话（上）：她如何通过“特长+赛道”实现财富升级

老蒋创客圈第64期对话标杆直播连麦&#xff0c;本期我们邀请到【iAMU蒙特梭利翻转星球】平台创始人申晓慧老师。 为我们揭秘“如何挖掘人生首个百万&#xff0c;实现财富升级&#xff1f;”&#xff0c;深度分享如何提炼用户痛点&#xff0c;高效引流新用户&#xff1f;如何通…...

编程日记 2024/8/22 16:16:55

最少钱学习并构建大模型ollama-llama3 8B

学习大模型时可能面临一些困难&#xff0c;这些困难可能包括&#xff1a; 计算资源限制&#xff1a;训练大模型通常需要大量的计算资源&#xff0c;包括CPU、GPU等。如果设备资源有限&#xff0c;可能会导致训练时间长、效率低下或无法完成训练。 内存限制&#xff1a;大模型通…...

编程日记 2024/8/22 16:15:53

AVI视频损坏了怎么修复？轻松几步解决你的困扰

在数字化时代&#xff0c;视频已成为我们记录生活、分享经验和传递信息的重要方式。AVI作为一种常见的视频格式&#xff0c;因其无损质量的特点而受到广泛欢迎。然而&#xff0c;有时候我们可能会遇到AVI视频文件损坏的情况&#xff0c;导致无法正常播放。别担心&#xff0c;本…...

编程日记 2024/8/22 16:13:30

【C++】map、set基本用法

欢迎来到我的Blog&#xff0c;点击关注哦&#x1f495; 前言: C的STL已经学习很大一部分了&#xff0c;接下来介绍的是map set是c的是两种关联容器。 简单介绍 map set&#xff1a; 两者都使用红黑树作为底层数据结构来存储元素。map是一种键值对容器&#xff0c;其中每个键…...

编程日记 2024/8/22 16:10:22

模型 闭环原理

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。反馈驱动&#xff0c;持续循环&#xff0c;缺陷亦被放大。 1 闭环原理的应用 1.1 闭环原理解读 AI自我训练&#xff0c;从人工智能变成人工智障 这里主要使用闭环原理来解释 AI 自我训练导致的问题。…...

编程日记 2024/8/22 16:07:55

3007. 价值和小于等于 K 的最大数字（24.8.21）

前言 感谢皇家笨阿宝的指导 题目 给你一个整数 k 和一个整数 x 。整数 num 的价值是它的二进制表示中在 x&#xff0c;2x&#xff0c;3x 等位置处设置位的数目&#xff08;从最低有效位开始&#xff09;。下面的表格包含了如何计算价值的例子。 XnumBinary RepresentationPri…...

编程日记 2024/8/22 16:06:54

微服务 - 分布式锁的实现与处理策略

作者&#xff1a;逍遥Sean 简介&#xff1a;一个主修Java的Web网站\游戏服务器后端开发者 主页&#xff1a;https://blog.csdn.net/Ureliable 觉得博主文章不错的话&#xff0c;可以三连支持一下~ 如有疑问和建议&#xff0c;请私信或评论留言&#xff01; 分布式锁的实现与处理…...

编程日记 2024/8/22 16:05:52

Catf1ag CTF Web（九）

前言 Catf1agCTF 是一个面向所有CTF&#xff08;Capture The Flag&#xff09;爱好者的综合训练平台&#xff0c;尤其适合新手学习和提升技能 。该平台由catf1ag团队打造&#xff0c;拥有超过200个原创题目&#xff0c;题目设计注重知识点的掌握&#xff0c;旨在帮助新手掌握C…...

编程日记 2024/8/22 16:04:51

QT QFileDialog 类

QFileDialog 类 QFileDialog 类 QFileDialog 是 Qt 库中的一个类&#xff0c;用于提供文件选择对话框&#xff0c; 允许用户选择文件或目录。QFileDialog 提供了多种静态方法和实例方法&#xff0c; 用于创建和配置文件对话框&#xff0c;并获取用户选择的文件或目录。 QObje…...

编程日记 2024/8/22 16:03:50

了解 K-Means 聚类的工作原理（详细指南）

一、说明 K-means 的目标是将一组观测值划分为 k 个聚类&#xff0c;每个观测值分配给均值&#xff08;聚类中心或质心&#xff09;最接近的聚类&#xff0c;从而充当该聚类的代表。 在本文中&#xff0c;我们将全面介绍 k 均值聚类&#xff08;最常用的聚类方法之一&#xff0…...

编程日记 2024/8/22 16:00:46

预警先行，弯道哨兵让行车更安全

预警先行&#xff0c;弯道哨兵让行车更安全”这句话深刻体现了现代交通安全理念中预防为主、科技赋能的重要性。在道路交通中&#xff0c;尤其是复杂多变的弯道区域&#xff0c;交通事故的发生率往往较高&#xff0c;因此&#xff0c;采取有效的预警措施和引入先进的交通辅助设…...

编程日记 2024/8/22 15:57:42

预约咨询小程序搭建开发，uniapp前端，PHP语言开发

目录 前言&#xff1a; 一、预约小程序搭建功能介绍 二、示例代码片段 前言&#xff1a; 预约咨询小程序适合需付费咨询和交流的场景&#xff1a;比如讲师,摄影,婚庆&#xff0c;美发,律师,心理等等支持商家入驻支持视频、图文、线下、电话等方式在线支付咨询。 一、预约小程…...

编程日记 2024/8/22 15:56:38