介绍
@beisen/channel-postmessage 是一款轻量级的前端通讯工具，基于 postmessage 实现跨文档通讯，适用于多个窗口之间的消息传递。
该工具的主要特点包括：支持与多个窗口通讯、支持发送和接收多种数据类型的消息、提供便捷的工具函数和配置项等。同时，该工具能够很好地解决在页面跳转或刷新后前后端消息传递的问题。
安装
使用 npm 进行安装：
npm install @beisen/channel-postmessage
使用方法
在需要使用的页面中引入该工具：
import postMessage from '@beisen/channel-postmessage';
初始化
在每个窗口中都需要进行初始化，以便于建立通讯链接。初始化代码如下：
postMessage.init(channelName, options);
其中，channelName 为通讯通道的名称，必填。
options 为配置项，可选。包括如下配置：
isRouteMode: 是否启用路由模式，默认为false。若为true，则消息将被缓存，等待页面跳转或刷新后进行处理。getReceiverOrigin: 获取接收者的 origin 地址，用于限制通讯范围。如果不指定，postMessage会发送给所有窗口。
发送消息
在源窗口中使用以下代码发送消息：
postMessage.send(receiver, messageType, data);
其中，receiver 为接收者窗口对象，必传。messageType 和 data 为消息类型和内容，必传。
除了基本类型数据，还可以发送复杂对象、数组、甚至文件等。示例如下：
-- -------------------- ---- -------
----- ------- - -
----- -----
---- ---
------- --- ---------------- ------------- - ----- ------------ ---
-------- -
-
----- -----
---- ---
------- --- ---------------- ------------- - ----- ------------ --
--
-
----- -----
---- ---
------- --- ---------------- ------------- - ----- ------------ --
-
-
--
-------------------------- ---------- ---------接收消息
在接收者窗口中，使用以下代码监听消息：
postMessage.on(messageType, callback);
其中，messageType 为消息类型，必传。callback 为回调函数，用于处理接收到的消息。
postMessage.on('message', (data, event) => {
console.log(data); // { name: '小明', age: 18, avatar: File, friends: [ { ... }, { ... } ] }
console.log(event.origin); // 发送消息的窗口 origin
});路由模式
启用路由模式后，页面跳转或刷新后可以自动处理缓存的消息。以下是示例代码：
postMessage.init('channelName', { isRouteMode: true });
postMessage.send(receiver, 'message', message);postMessage.on('message', (data, event) => {
console.log(data);
});工具函数
该工具还提供了以下便捷的工具函数：
postMessage.removeReceiver(receiver): 移除某个接收者。postMessage.removeReceiverAll(): 移除所有接收者。postMessage.sendAll(messageType, data): 向所有接收者发送消息。postMessage.hasReceiver(): 判断是否存在接收者。
总结
@beisen/channel-postmessage 是一款方便使用的前端通讯工具，可以很好地解决多窗口之间的消息传递问题。在实际开发中，我们可以根据自身需求选择是否启用路由模式，并根据具体业务场景发送各种类型的消息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/128007