一个微前端使用的postmessage消息透传库
npm install event-ratel
// 方式1: 默认导入
import EventRatel from 'event-ratel';
// 使用
const eventRatel = new EventRatel();
// 或者使用单例模式
const eventRatel = EventRatel.getInstance();
`
2. 使用CommonJS(require)
对于Node.js环境或使用CommonJS模块系统:
`
// 方式1: 默认导入
const EventRatel = require('event-ratel');
// 使用
const eventRatel = new EventRatel();
// 或者使用单例模式
const eventRatel = EventRatel.getInstance();
`
3. 使用UMD(script标签)
对于直接在浏览器中使用script标签引入:
`
`
#### 使用说明
1. 发送透传消息
`
eventRatel.emit('someEvent', data)
eventRatel.emit('someEvent', data, 'iframeId') //指定iframe监听
eventRatel.emitParent('someEvent', data) // 只给父级窗口发送消息
eventRatel.on('someEvent', (data) => {
console.log('Received:', data);
})
eventRatel.off('someEvent')
`
这里的off事件,需要把on监听的方法单独抽离出来,跟vue的bus监听是一样的用法,例如:
`
created() {
eventRatel.on("someEvent", this.handleMessage);
},
methods: {
handleMessage(data) {
console.log(data);
},
},
beforeDestroy() {
eventRatel.off("someEvent", this.handleMessage);
},
`
2. 获取父页面的cookie【返回一个Promise】
`
eventRatel.getParentCookie(key) // 获取指定key的cookie,不传获取全部
`
3. 获取父页面的localStorage【返回一个Promise】
`
eventRatel.getParentLocalStorage(key) // 获取指定key的localStorage,不传获取全部
`
4. 获取父页面的sessionStorage【返回一个Promise】
`
eventRatel.getParentSessionStorage(key) // 获取指定key的sessionStorage,不传获取全部
`
#### 实例化参数配置
`
const instance = EventRatel.getInstance({
securityMode: true,
trustedOrigins: ['https://example.com', 'https://*.example2.com']
});
``