Блог

Главная - Вопросы по программированию - Как я могу получить данные postmessage из react?

Как я могу получить данные postmessage из react?

#javascript #reactjs #postmessage

#javascript #reactjs #postmessage

Вопрос:

Я пытаюсь загрузить URL-адрес react в виде iframe в мой проект jsp.

Вот мой блок кода на стороне отправителя:

 <iframe id="eda" 
               style="display: none;"
                src="http://myhost:3000/"
                width="100%" height="600" border="0" marginwidth="0"
                marginheight="0" scrolling="no">
</iframe>   

****

function loadReactIframe(){
    document.getElementById("eda").contentWindow.postMessage('GET MESSAGE FROM ME', '*');
}

Я также попробовал следующее:

 function loadReactIframe(){
      document.getElementById("eda").contentWindow.postMessage(
            'GET MESSAGE FROM ME', 
            'http://myhost', 3000
     );
}

Мой блок кода получателя (react):

 componentDidMount() {
     window.addEventListener('load', this.handleLoad);
     alert('componentDidMount')
}

handleLoad(event) {
     alert(event.data);
}

Но я не могу получить данные из event.

Комментарии:

1. Попробуйте это… window.addEventListener('message', function(event){ });

2. событию message не удалось перехватить сообщение post. :/

3. Ваш приемник находится внутри iframe , верно??

4. Да, мой приемник — это проект react, я вызываю его из проекта jsp в iframe.

5. Проверьте, loadReactIframe вызывается ли после инициализации прослушивателя…

Ответ №1:

Для этого уже есть полезный хук. https://www.npmjs.com/package/@rottitime/react-hook-message-event

На странице Readme есть инструкции, но вот представление о том, как это работает, установите перехват:

 npm i @rottitime/react-hook-message-event

В вашем компоненте используйте его так же, как вы бы использовали любой другой хук, такой например useState .

Импортируйте файл в свой компонент

 import {useMessage} from '@rottitime/react-hook-message-event'

Вы можете прослушать сообщение и использовать обратный вызов для ответа. Для примера возьмем следующий сценарий:

  1. Родительское окно прослушивает сообщение hello из дочернего окна
  2. Родитель получает hello от дочернего
  3. Родитель отправляет обратно world дочернему
 //listens for the 'hello' message from window.postMessage()
useMessage('hello', (send, payload) => {
  //use sendMessage to post back to the sender
  send({ type: 'world', success: true });
});