介绍
react-iframe-comm 是一个使 iframe 与父窗口进行通信的 npm 包。它提供了简单易用的 API，可以用来进行双向的数据传递和方法调用。
安装
安装 react-iframe-comm 很简单，只需要在你的项目中执行一条命令即可：
npm install --save react-iframe-comm
使用
使用 react-iframe-comm 分为两个部分，一部分是在 iframe 中使用，另一部分是在父窗口中使用。
在 iframe 中使用
在 iframe 中，我们需要使用 useIframeComm hook 来进行通信：
-- -------------------- ---- -------
------ - ------------- - ---- --------------------
-------- -------- -
----- ------ -------- - -------------
---------------
---------- --------- -- -
-----------------
--
---
------ ------------- ----- -------------
-在上面的代码中，我们首先使用 useState 定义了一个 data 变量来存储从父窗口接收到的数据。然后我们使用 useIframeComm hook 来创建一个通信通道，并传入一个 onMessage 回调函数用来处理从父窗口发来的消息。
在父窗口中使用
在父窗口中，我们同样需要使用 useIframeComm hook 来进行通信：
-- -------------------- ---- -------
------ - ------------- - ---- --------------------
-------- -------- -
----- ------ -------- - -------------
----- ----------- ------------ - ----------------
----- ----------- - -- -- -
------------------ ---- ----------
--
------ -
-----
------- --------------- --
------- -------------------------- ------- -- ---------------
------
--
-在上面的代码中，我们首先使用 useState 定义了一个 data 变量来存储从 iframe 接收到的数据。然后我们使用 useIframeComm hook 来创建一个通信通道，并获取到一个 iframeRef 变量和一个 sendMessage 函数。我们将 iframeRef 变量传入 iframe 元素的 ref 属性中，以便在将来可以访问它。我们还定义了一个点击事件处理函数 handleClick，在该函数中调用 sendMessage 函数向 iframe 中发送一条消息。
示例
接下来，让我们看一个完整的示例，展示如何在 iframe 和父窗口之间传递数据和调用方法：
-- -------------------- ---- -------
-- --------
------ ------ - -------- - ---- --------
------ - ------------- - ---- --------------------
-------- ------- -
----- ------- --------- - ------------
---------------
---------- ----- -- -
-- --------- --- ------ -
-------------------- -- --------- - -----------
-
-- --------- --- -------- -
------------
-
--
---
------ -
-----
--------------
--------- -----------
------
--
-
------ ------- -------- -------------------- ---- -------
-- ---------
------ ------ - -------- - ---- --------
------ - ------------- - ---- --------------------
------ ----- ---- ----------
-------- -------- -
----- ----------- ------------ - ----------------
----- ----------- - -- -- -
------------- ----- ------ ------ - ---
--
----- ----------- - -- -- -
------------- ----- ------- ---
--
------ -
-----
------- --------------- --
------- ------------------------- - -- --------------
------- --------------------------- --------------
------ --
------
--
-
------ ------- -------
在上面的代码中，我们首先创建了一个 Child 和 Parent 组件。在 Child 组件中，我们定义了一个 count 状态变量来存储当前的计数值。然后我们在 useIframeComm hook 中传入一个 onMessage 回调函数来处理从父窗口发送过来的消息。在回调函数中，我们根据消息的 type 属性来判断该执行什么操作。
在 Parent 组件中，我们使用 useIframeComm hook 来获取一个 iframeRef 变量和一个 sendMessage 函数。我们将 iframeRef 变量传入 iframe 元素的 ref 属性中，以便在将来可以访问它。我们还定义了两个点击事件处理函数 handleClick 和 handleReset，在这些函数中分别调用 sendMessage 函数来向 Child 组件发送消息。在 Parent 组件中，我们还创建了一个 Child 组件，并将其渲染在页面上。
这个示例展示了如何在 iframe 和父窗口之间传递数据和调用方法，为开发者提供了更多的灵活性和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d5f81e8991b448db24e