介绍
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
