Comunicar una Web en React con un Frame dentro de React o web HTML con JavaScript usando postMessage()

Tiempo de lectura: 2 minutos

Hoy vamos a ver cómo podemos comunicar una web creada con React con un iFrame o frame en React o HTML con JavaScript.

Cargar el Frame

Creamos un iframe:

<iframe
     src={urlCargar}
     style={{ width: '100%', height: '500px' }}
     />

En urlCargar ponemos la URL de la web de la que queremos capturar el evento.

Ahora creamos el evento que nos permitirá obtener los datos:

  useEffect(() => {
        function handleReceiveMessage(event: MessageEvent) {
            // Comprueba si el origen del mensaje es el esperado
            if (event.origin !== "http://localhost:3000" && event.origin !== "tu_url") {
                // No manejes el mensaje si el origen es desconocido
                return;
            }

            //Si no es JSON (recibimos un texto plano):
            //alert(datosDevueltos);

           //Si se recibe un objeto JSON:
           const datosDevueltos = JSON.parse(event.data);
           alert(JSON.stringify(datosDevueltos));
        }

        window.addEventListener('message', handleReceiveMessage);

        return () => {
            window.removeEventListener('message', handleReceiveMessage);
        };
    }, []);

Primero comprobamos que estamos recibiendo desde la URL correcta:

            if (event.origin !== "http://localhost:3000" && event.origin !== "tu_url") {
                // No manejes el mensaje si el origen es desconocido
                return;
            }

*Debes indicar en tu_url la URL de dónde esperas recibir los eventos.

Y ahora, para obtener el evento, si es texto o un objeto se realiza de la siguiente manera:

            //Si no es JSON (recibimos un texto plano):
            //alert(datosDevueltos);

           //Si se recibe un objeto JSON:
           const datosDevueltos = JSON.parse(event.data);
           alert(JSON.stringify(datosDevueltos));

React

En React vamos a crear una web por ejemplo test.tsx

Primero tenemos que definir un nuevo tipo para Window (que nos pide React Native WebView)

declare global {
  interface Window { 
    ReactNativeWebView: any; 
  }
}

Y ahora simplemente dónde queramos comunicar el evento podremos:

window.ReactNativeWebView.postMessage("Hola");

o Incluso podemos enviar objetos JSON:

window.parent.postMessage(JSON.stringify(objEnviar));