React 应用程序通过 postMessage 与 iframe 通信：在哪里设置回调？答案

【问题标题】：React app communicate with iframe via postMessage: where to setup callbacks?React 应用程序通过 postMessage 与 iframe 通信：在哪里设置回调？
【发布时间】：2021-06-03 13:55:28
【问题描述】：

我有一个与第三方 iframe 通信的网站。

有3种方法：登录、签名和获取信息。他们都工作相似。我嵌入了第三方 iframe 并通过window.postMessage(...) 向它发送消息。在我向 iframe 发送消息后，我会收到回复。

我想不出一个干净的架构来封装通信。

目前的想法：

class iFrameCommunicator{
  init() { 
      window.addEventListener('message', (message) => {
         if (message == "login_success"){
           setGlobalLoginState(true)
        }
        if (message == "sign_success"){
           setGlobalSignState(true)
        }
      })
    }
  }
  login() {
    window.postMessage({command: "login"})
  }

  sign(payload) {
    window.postMessage({command: "sign", payload: payload})
  }
}

登录页面

<button onClick={() => iFrameCommunicator.login()}>Login</button>

使用这种方法，我必须监视GlobalLoginState 以查看登录调用是否成功。我希望登录函数（和其他函数）改为返回 Promise。

有没有办法重构代码，以便与 iframe 通信的每个函数都返回一个 Promise，而不必为每个函数调用设置 addEventListener？

【问题讨论】：

标签： javascript reactjs iframe

【解决方案1】：

您是否考虑过取决于您的 GlobalLoginState 的 useEffect 用法？然后根据其他事件更新您的状态？老实说，在不完全了解您的 web 应用程序中的其他上下文或可用性的情况下给出答案是非常困难的。

【讨论】：