es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿window.addEventListener(“message”, getData); no funciona en Safari?

29 May, 2023 Programación

Estoy enviando un postmessage desde el script de JavaScript al iframe que se encuentra en React.

// Escuchando la función postMessage() en React
// Archivo de React

useEffect(() => {

function getData(e) {
console.log(“dentro de la función”);
var origin = e.origin || e.originalEvent.origin;
console.log(“origen”, origen);

if (typeof e.data == “object” && “shopDomain” in e.data) {
console.log(e.data);
} else {
console.log(“no se pudo capturar los datos”);
}
}
window.addEventListener(“message”, getData, false);
return () => {
window.removeEventListener(“message”, getData, false);
};
}, []);

// Archivo de JavaScript

let win = iframe.contentWindow;
win.contentWindow.postMessage(
{
customerId: customerId_rs,
parentLocation: window.location.host,
},
“*”
);

He mirado varios sitios pero no puedo encontrar ninguna solución. He pasado casi 10 horas en esto, cualquier ayuda sería apreciada.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en TI especializado en JavaScript, Safari, y postMessage, entiendo que estás enfrentando un problema al enviar un postMessage desde un script de JavaScript a un iframe en React.

    Parece que has configurado una función oyente de postMessage en tu archivo de React, que está escuchando los datos entrantes del iframe. Sin embargo, no estás siendo capaz de capturar los datos que están siendo enviados desde el archivo de JavaScript al iframe.

    Basado en los fragmentos de código que has proporcionado, parece que estás intentando enviar los datos ‘customerId’ y ‘parentLocation’ desde el archivo de JavaScript al iframe usando la función postMessage. Sin embargo, no está claro si has configurado una función oyente correspondiente en el iframe para recibir estos datos.

    Para solucionar el problema, podrías intentar revisar lo siguiente:

    1. Asegúrate de que la variable ‘win’ en tu archivo de JavaScript apunte al elemento iframe correcto. Podrías imprimir en consola la variable ‘win’ para revisar si es el elemento correcto.

    2. Si la variable ‘win’ es correcta, trata de agregar una función oyente en el componente de React del iframe para recibir los datos entrantes. Puedes configurar una función similar a la que tienes en tu archivo de React:

    function receiveData(e) {
  console.log("Received data from parent:", e.data);
  // maneja los datos entrantes aquí
}

useEffect(() => {
  window.addEventListener("message", receiveData, false);
  return () => {
    window.removeEventListener("message", receiveData, false);
  };
}, []);

    Al agregar el código anterior a tu componente de React, deberías ser capaz de recibir los datos entrantes del archivo de JavaScript y manejarlos según sea necesario.

    Espero que estas sugerencias te ayuden a resolver el problema. Hazme saber si tienes más preguntas o inquietudes.

Comments are closed.