Приложение React взаимодействует с iframe через postMessage: где настроить обратные вызовы?

#javascript #reactjs #iframe

Вопрос:

У меня есть веб-сайт, который взаимодействует со сторонним 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 , чтобы убедиться, что вызов для входа был успешным. Я бы хотел, чтобы функция входа в систему (и другие функции) вместо этого возвращали обещание.

Есть ли способ рефакторинга кода, чтобы каждая функция, которая взаимодействует с iframe, возвращала обещание без необходимости настройки addEventListener для каждого вызова функции?

Ответ №1:

Рассматривали ли вы возможность использования эффекта использования, который зависит от вашего состояния GlobalLogin? Затем обновил свое состояние на основе других событий? Честно говоря, довольно сложно дать ответ, не зная точно другого контекста или возможностей вашего веб-приложения.