当我们在网页中嵌入 iframe 或使用跨域方案时，需要在不同的页面间进行通信。ngx-post-message 是一个优秀的 npm 包，提供了便捷的跨页面通信解决方案。
安装
首先，我们需要在项目中安装该 npm 包：
npm install ngx-post-message --save
引入模块
在需要使用 ngx-post-message 的模块中，我们需要引入 ngx-post-message 模块：
-- -------------------- ---- -------
------ - -------------------- - ---- -------------------
-----------
-------- -
-- ---
--------------------
--
-- ---
--
------ ----- --------- - -发送消息
在发送消息端，我们可以通过 ngx-post-message 服务的 SendMessage 方法向其他页面发送消息：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- -------------------
------------
--------- -----------
--------- - ------- ------------------------------------- -
--
------ ----- ------------- -
------------------- ---------------------- ---------------------- --
------------- -
----- ----------- - ------- ---- -- - ---------
----- ------------ - ---------------------
--------------------------------------------------- --------------
-
-在 SendMessage 方法中，我们需要传入两个参数：
- messageData：与消息有关的数据，通常是对象或字符串。
- targetOrigin：接收消息的目标源地址。如果此参数为
'*'，则意味着不限制目标源地址。
接收消息
在接收消息端，我们需要调用 NgxPostMessageService 的 GetMessage 方法，并使用 Observable 订阅消息数据：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------------- ------------------- - ---- -------------------
------------
--------- -----------
--------- - ----- ----------- ------ -
--
------ ----- ------------- -
------------ ----
------------------- ---------------------- ---------------------- -
--------------------------------------------------------- -------------------- -- -
---------------- - -----------
---
-
-在 GetMessage 方法中，我们可以不传任何参数。通过订阅 Observable，我们可以在消息到达时接收到消息数据，从而进行其他的操作。
示例代码
下面是一个完整的使用案例，我们可以在两个不同的网页 tab 中运行此代码。
发送消息端：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- -------------------
------------
--------- -----------
--------- - ------- ------------------------------------- -
--
------ ----- ------------- -
------------------- ---------------------- ---------------------- --
------------- -
----- ----------- - ------- ---- -- - ---------
----- ------------ - ------------------------
--------------------------------------------------- --------------
-
-接收消息端：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------------- ------------------- - ---- -------------------
------------
--------- -----------
--------- - ----- ----------- ------ -
--
------ ----- ------------- -
------------ ----
------------------- ---------------------- ---------------------- -
--------------------------------------------------------- -------------------- -- -
---------------- - -----------
---
-
-结语
ngx-post-message 是一个强大的 npm 包，提供了跨页面通信解决方案，并得到了广泛的应用。通过参考本文，您可以使用该 npm 包将不同页面之间的通信问题解决掉。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564ee81e8991b448e18f3