m-bridge 是一个用于前端应用的轻量级消息桥，可以在多个窗口或不同页面之间传输消息。它可以方便地实现跨页面、跨站点的通信，使得在前端开发中的一些需要消息通信的场景变得更加轻松。
安装
可以使用 npm 安装 m-bridge 包。
在项目目录下执行以下命令：
npm install m-bridge
使用
在需要使用 m-bridge 的模块中，通过 import 或 require 引入 m-bridge 包。
import Bridge from 'm-bridge';
初始化
在页面载入时，可以通过以下方式初始化 m-bridge。
-- -------------------- ---- ------- -- --------- ----- ------ - --- --------- -- ----------------------- -------------------- -------- ------ - ---------------------- ------ --- -- ---- ---------------------- - ---- ------- ---
发送消息
可以通过 send 方法在一个页面中触发消息并传递数据。在另一个页面中，监听 message 事件即可接收消息。
bridge.send('message', {
text: 'hello world'
});监听消息
可以通过 on 方法在一个页面中监听消息。当有其他页面通过bridge.send('message', ...)发送消息，会触发绑定的监听函数。
bridge.on('message', function (data) {
console.log(`收到一条消息：${data.text}`);
});取消监听
使用 off 方法可以取消之前通过 on 方法绑定的监听事件。
const callback = function (data) {
console.log(`收到一条消息：${data.text}`);
};
bridge.on('message', callback);
bridge.off('message', callback);发送消息到指定窗口
通过 sendToWin 方法可以将消息发送到指定窗口。
bridge.sendToWin('winName', 'message', {
text: 'hello'
});接收来自指定窗口的消息
通过 fromWin 方法监听来自指定窗口的消息。例如：
bridge.fromWin('winName').on('message', function (data) {
console.log(`收到来自 ${winName} 发送的消息：${data.text}`);
});示例
以下示例演示了如何在两个窗口之间实现消息通信。首先，我们创建一个 index.html 文件，它包含两个按钮，点击按钮后所在的窗口上方都会出现提示。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
------------------
-------
------
------- ------------------------
------- ------------------------
------- ---------------------------
--------
----- ------ - --- ---------
--------------------------------------------------------- ---------- -
----------------
---
--------------------------------------------------------- ---------- -
----------------
---
-------- ---------------- -
-------------------------------------- ----------
-
--------------- --- -------------- -
------------------------------
---
--------------- --- -------------- -
------------------------------
---
---------
-------
-------然后，我们创建一个名为 window.html 的文件，它包含一个输入框和一个按钮。当点击按钮时，将向主窗口发送一条带有输入框中文本的消息。
-- -------------------- ---- -------
---- ----------- ---
--------- -----
------
------
------------------
-------
------
------ ----------- ---------- --
------- --------------------
------- ---------------------------
--------
----- ------------ - --- ----------------------------------------
----- ------- - ------------------------
----- ------ - --- ---------
-------------------------------------------------------- ---------- -
----- ---- - ---------------------------------------
----------------- ------------ - ---- ---
---
---------
-------
-------在这个示例中，我们首先通过独立的 JavaScript 文件引入了 m-bridge 包，并在主窗口和子窗口中分别创建了一个桥实例，并在子窗口中向主窗口发送消息。当主窗口接收到来自子窗口的消息时，会执行相应的回调函数，弹出提示框。
结论
使用 npm 包 m-bridge 可以方便地实现多页面之间的消息通信。它有着简单的 API 并支持多种方式的消息发送和接收，使得它在很多实际应用场景中都能得到广泛的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005586f81e8991b448d5a9b