介绍
在 Web 开发中，前端消息传递往往是不可避免的需求。现有的消息传递方式有多种，比如使用 WebSocket、跨文档通信（postMessage）等，而这些方式都有各自的实现复杂度和适用场景。本篇文章将介绍一个新的前端消息传递工具——npm 包 @bitbybit/amp-message，并详细介绍其使用方法和使用场景。
@bitbybit/amp-message 是一个轻量级、可扩展的前端消息传递工具。使用其提供的 API，可以轻松地在前端不同窗口和 iframe 之间进行消息传递。使用该工具，你可以方便地将消息和数据从一个窗口传递到另一个窗口，而不必担心跨域和安全性问题。
安装
使用 npm 安装 @bitbybit/amp-message ：
npm install @bitbybit/amp-message --save
使用方法
发送消息
在需要发送消息的窗口或 iframe 中，首先需要创建一个 @bitbybit/amp-message 的实例：
const message = new AMPMessage();
然后，使用该实例的 send 方法向目标窗口或 iframe 发送消息：
message.send(target, 'message', data);
其中，target 是要发送消息到的窗口或 iframe；'message' 是你指定的消息名称；data 是你要传递的数据，可以是任意类型的值。
// 发送消息
const iframeWindow = document.querySelector('#iframe-id').contentWindow;
message.send(iframeWindow, 'message1', {message: 'hello from parent'});接收消息
在接收消息的窗口或 iframe 中，首先也需要创建一个 @bitbybit/amp-message 的实例：
const message = new AMPMessage();
然后，使用该实例的 on 方法监听指定消息名称的消息：
message.on('message', (data) => {
// 处理接收到的消息
});当接收到名称为 'message' 的消息时，该方法会被触发，data 参数为接收到的数据。
// 接收消息
message.on('message1', (data) => {
console.log(data.message);
});关闭通道
在不再需要使用 @bitbybit/amp-message 实例时，应该及时关闭通道以释放资源：
message.close();
示例代码
下面是一个完整的使用示例，演示如何在父窗口和 iframe 之间进行消息传递：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------- ------------
-------
------
----------- ------- ---------
------- ----------------- ------------------------
------- ------------------ ------- -- ---------------
------- ---------------------- ----------------------------------------------------------------------------
------- -----------------------
----- ------- - --- -------------
-- ----
----- ------------ - ---------------------------------------------------
----- ------- - ------------------------------------
--------------------------------- -- -- -
-------------------------- ----------- --------- ------ ---- ----------
---
-- ----
---------------------- ------ -- -
-------------------- -------- ------------------
---
---------
-------
-------
-- -------------------- ---- -------
---- ----------- ---
--------- -----
------
------
----- ----------------
-------------- ------- ---- - --------------
-------
------
----------- ------- ---- - -----------
------- ---------------------- ----------------------------------------------------------------------------
------- -----------------------
----- ------- - --- -------------
-- ----
----- ------------ - --------------
-------------------------- ----------- --------- ------ ---- ----------
-- ----
---------------------- ------ -- -
-------------------- -------- ------------------
---
---------
-------
-------在运行上述代码后，点击“Send Message to iframe”按钮，父窗口会向 iframe 发送消息，iframe 会接收到该消息并向父窗口发送返回消息，父窗口再接收该消息并打印到控制台。
使用场景
@bitbybit/amp-message 可以应用于多种前端场景，比如：
- 页面之间的消息传递：例如在多个页面之间进行数据传递和状态同步；
- iframe 内容和父窗口之间的通信：例如在一个 iframe 中进行操作，并将操作结果传递到父窗口中；
- 前端组件之间的通信：例如在一个 Vue 组件中使用该工具，在不同组件之间进行消息传递和状态同步。
总结
@bitbybit/amp-message 是一个轻量级、可扩展的前端消息传递工具，可以帮助你轻松地在前端不同窗口和 iframe 之间进行消息传递。本文详细介绍了该工具的使用方法和示例代码，并探讨了其在前端开发场景下的应用。通过学习本文内容，你将更好地理解和掌握前端消息传递的技术，以及如何使用 @bitbybit/amp-message 实现前端消息传递。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5f51ab1864dac671f9