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

微前端传值

news 2026/2/8 16:52:51

在微前端架构中，不同子应用之间通过 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

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2026/2/5 0:36:44

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/2/5 2:28:27

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/2/6 13:42:22

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09

跨平台商品数据接口的标准化与规范化发展路径：淘宝京东拼多多的最新实践

在电商行业蓬勃发展的当下&#xff0c;多平台运营已成为众多商家的必然选择。然而&#xff0c;不同电商平台在商品数据接口方面存在差异&#xff0c;导致商家在跨平台运营时面临诸多挑战&#xff0c;如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...

编程新知 2026/1/26 10:30:17

Java中栈的多种实现类详解

Java中栈的多种实现类详解&#xff1a;Stack、LinkedList与ArrayDeque全方位对比 前言一、Stack类——Java最早的栈实现1.1 Stack类简介1.2 常用方法1.3 优缺点分析 二、LinkedList类——灵活的双端链表2.1 LinkedList类简介2.2 常用方法2.3 优缺点分析 三、ArrayDeque类——高…...

编程新知 2025/12/3 1:36:31

用js实现常见排序算法

以下是几种常见排序算法的 JS实现&#xff0c;包括选择排序、冒泡排序、插入排序、快速排序和归并排序&#xff0c;以及每种算法的特点和复杂度分析 1. 选择排序&#xff08;Selection Sort&#xff09; 核心思想&#xff1a;每次从未排序部分选择最小元素&#xff0c;与未排…...

编程新知 2025/9/25 19:59:14