Ember Window Messenger 是一个可以在父窗口和子窗口之间传递消息的 JavaScript 库，它可以在 Ember 应用中使用，并可以通过 npm 方式进行安装。
在本篇文章中，我们将深入探讨如何使用 Ember Window Messenger 包，包括其原理、用法、示例代码和注意事项等内容，从而使开发人员能够更加快速地实现父窗口和子窗口之间的通信，提高开发效率。
Ember Window Messenger 原理
Ember Window Messenger 是基于 window.postMessage API 的，该 API 可以发送跨域 iframe 之间的消息，同时还可以在同域 iframe 中进行消息通信。
当在一个窗口中使用 window.postMessage 方法向另一个窗口发送消息时，其实是向该窗口的浏览器队列中投递了一条消息。接着另一个窗口中的 JavaScript 脚本会监听 message 事件，当有消息到达时会触发该事件，从而实现了跨窗口消息的传递。
Ember Window Messenger 安装
可以通过 npm 方式进行安装，执行以下命令即可：
npm install ember-window-messenger --save-dev
Ember Window Messenger 使用方式
在使用 Ember Window Messenger 时，首先需要创建一个 Messenger 实例，并在该实例上执行 connect 方法连接父窗口和子窗口。
具体来说，可以在父组件或者应用的 init 方法中创建 Messenger 实例，并在子组件或者应用中启动该实例。
以下是一个基本的使用示例：
-- -------------------- ---- -------
-- ------ ---
------ ----- ---- --------
------ - -------- - ---- ---------------------
------ --------- ---- -------------------------
----- --- - --------------------------
-- ------ --------- --
------ -
--------------------------
----- --------- - --- -----------
------------- ----------------- -- -----------
----- --------- -- -------
----------- ------- -- ------
---
-- --------
------------------------- -
----- ------- -------
---
-
---
------ ------- ----
-- --------- ---
------ ----- ---- --------
------ --------- ---- -------------------------
----- -------- - --------------------------
-- ------ --------- --
------ -
--------------------------
----- --------- - --- -----------
----- -------- -- -------
----------- -------- -- ------
---
-------------------- -- -- --------- --
-- --------
------------------------------ ------ -- -
------------------ -- - ----- ------- ------- -
---
-
---
------ ------- ---------
在此示例中，我们创建了两个应用：父窗口中的 App 和子窗口中的 ChildApp，同时在 App 应用的 init 方法中创建了一个名称为 parent 的 Messenger 实例，并在其上进行了连接操作和消息发送操作。
接着在 ChildApp 应用的 init 方法中创建了一个名称为 child 的 Messenger 实例，并在其上启动了连接操作和消息监听操作，从而实现了父子窗口之间的消息通信。
Ember Window Messenger 注意事项
在 Ember 应用中使用 Ember Window Messenger 时，需要注意以下几点：
- Messenger 实例需要在初始化或者组件中定义；
- Messenger 实例需要在父组件或者应用中进行创建，而在子组件或者应用中进行启动；
- 在使用 Messenger 实例发送和接收消息时，需要保证发送和接收的消息名称一致；
- 在使用 Messenger 实例时，要确保父窗口和子窗口的域名和协议一致，否则无法进行跨域消息的传递。
结语
通过本篇文章的学习，我们了解了 Ember Window Messenger 的原理、安装方式、使用方式和注意事项等内容，同时还提供了实际的示例代码，相信对于开发人员实现父子窗口之间的消息通信非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ca563576b7b1ecca2