在微前端架构日益普及的今天，iframe与主框架之间的消息通信始终是开发者绕不开的痛点。跨域限制、消息混乱、存储数据获取繁琐、安全风险隐患……这些问题往往让简单的通信需求变得复杂棘手。
为解决这些痛点，EventRatel应运而生——一款专为微前端设计的postmessage消息透传库，不仅能轻松实现iframe与主框架的双向通信，还支持安全获取父页面的cookie、localStorage和sessionStorage，让微前端通信变得简单、高效又安全！
核心优势：精准击破微前端通信痛点
1. 多场景适配，引入方式灵活无门槛
无论你的项目是基于现代前端框架的ES模块环境，还是Node.js的CommonJS环境，亦或是直接在浏览器中使用原生script标签，EventRatel都能完美适配。三种引入方式任你选择，复制代码即可快速集成，无需额外配置，上手成本极低。
2. 通信功能强大，消息传递精准可控
EventRatel提供了全方位的消息透传能力，满足不同场景下的通信需求：
-
全局广播消息：一行代码即可向所有关联框架/iframe发送消息；
-
指定目标通信：精准定位特定iframeID发送消息，避免消息混乱；
-
单向定向通信：支持仅向父级窗口发送消息，满足层级通信需求；
-
完善的事件管理：提供on监听、off移除监听方法，适配Vue等框架的生命周期管理，避免内存泄漏。
3. 轻松获取父页存储，跨域数据共享更便捷
在微前端场景中，子应用获取父页面存储数据（cookie、localStorage、sessionStorage）是常见需求，但跨域限制和手动实现postmessage通信繁琐又容易出错。
EventRatel封装了专门的API，只需调用getParentCookie、getParentLocalStorage、getParentSessionStorage方法，即可轻松获取父页面的存储数据。支持获取指定key的单个数据，也可获取全部数据，返回Promise格式，异步处理更优雅，彻底告别手动封装的繁琐。
4. 内置安全机制，规避跨域通信风险
安全是通信的底线。EventRatel内置安全模式，通过securityMode参数即可开启，配合trustedOrigins信任域名列表，可精准控制允许通信的域名。支持精确匹配、通配符匹配，也可设置全部允许，灵活适配不同环境需求。安全模式下默认仅允许同源域名通信，从根源上规避非法域名的恶意消息攻击，保障应用通信安全。
5. 单例模式支持，全局通信状态统一
EventRatel支持单例模式调用，通过getInstance方法即可获取全局唯一实例，确保整个应用的通信状态统一，避免多实例导致的消息混乱，尤其适合复杂微前端架构下的全局通信管理。
快速上手：3步实现微前端通信
第一步：安装引入
支持ES模块、CommonJS、UMD三种引入方式，可根据项目环境灵活选择；同时提供安全配置选项，保障通信安全，示例如下：
// 1. ES模块（import，适用于现代前端框架/ES6浏览器）
import EventRatel from 'event-ratel';
// 2. CommonJS（require，适用于Node.js环境）
// const EventRatel = require('event-ratel');
// 3. UMD（script标签，适用于直接在浏览器中使用）
// 引入：<script src="https://unpkg.com/event-ratel/dist/index.umd.min.js"></script>
// 使用：const EventRatel = window.EventRatel;
// 基础初始化（支持单例模式，三种引入方式均适用）
const eventRatel = new EventRatel();
// 或单例模式
// const eventRatel = EventRatel.getInstance();
// 进阶：实例化安全配置（开启安全模式，指定信任域名）
const eventRatelWithSecurity = EventRatel.getInstance({
securityMode: true, // 开启安全模式，默认false（开放模式）
trustedOrigins: ['https://example.com', 'https://*.example2.com'] // 信任域名列表，支持精确/通配符匹配
});
第二步：发送与监听消息
// 发送消息
eventRatel.emit('userLogin', { userId: 123, userName: 'test' });
// 监听消息
eventRatel.on('userLogin', (data) => {
console.log('接收登录信息：', data);
});
第三步：获取父页存储数据
// 获取父页指定cookie
eventRatel.getParentCookie('token').then(token => {
console.log('父页token：', token);
});
// 获取父页全部localStorage
eventRatel.getParentLocalStorage().then(storage => {
console.log('父页localStorage：', storage);
});
适用场景：覆盖全品类微前端需求
无论你是在开发大型企业级微前端应用，还是简单的iframe嵌入需求，EventRatel都能发挥巨大作用：
-
大型微前端项目：多应用、多iframe之间的复杂通信管理；
-
子应用集成：子应用需要获取父应用用户信息、权限状态等场景；
-
跨域iframe嵌入：第三方iframe与主应用的安全通信需求；
-
多层级框架通信：嵌套iframe的层级通信、数据共享场景。
为什么选择EventRatel？
相比手动封装postmessage通信，EventRatel的优势显而易见：
-
简化开发：封装底层postmessage逻辑，开发者无需关注复杂的跨域处理和消息格式；
-
提升效率：一行代码实现通信和存储获取，大幅减少开发工作量；
-
保障安全：内置安全机制，规避跨域通信风险；
-
兼容性强：支持全场景引入方式和主流浏览器，适配各类项目架构；
-
轻量可靠：聚焦核心需求，无冗余依赖，运行稳定高效。
现在，EventRatel已全面开放使用，只需一句命令即可安装集成。告别微前端通信的繁琐与混乱，让EventRatel为你的项目赋能，让通信更简单、更安全！
火箭立即体验EventRatel：
**npm安装：**npm install event-ratel
UMD直接引入：****<script src="https://unpkg.com/event-ratel/dist/index.umd.min.js"></script>
