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

微前端传值

news 2025/9/16 7:47:43

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

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/9/9 10:13:07

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/9/9 14:47:30

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/9/11 12:55:06

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/9/13 2:29:19

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/8/18 9:46:04

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2025/9/2 17:48:56

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/7/7 16:04:22

微服务通信安全：深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

编程新知 2025/7/6 17:40:31

加密通信 + 行为分析：运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...

编程新知 2025/9/9 18:03:51

对象回调初步研究

_OBJECT_TYPE结构分析 在介绍什么是对象回调前&#xff0c;首先要熟悉下结构 以我们上篇线程回调介绍过的导出的PsProcessType 结构为例&#xff0c;用_OBJECT_TYPE这个结构来解析它&#xff0c;0x80处就是今天要介绍的回调链表&#xff0c;但是先不着急&#xff0c;先把目光…...

编程新知 2025/9/9 10:04:50