Estoy incrustando una aplicación React en un iframe. La aplicación se ejecuta en el mismo dominio que el padre iframe. Puedo esperar a que se cargue el iframe usando el evento onload del iframe de esta manera:
<body> <iframe id="frame" src="http://some/react/app"></iframe> <script> const frame = document.getElementById("frame"); frame.onload = () => { frame.querySelector("..."); } </script> </body> Sin embargo, el querySelector devuelve un valor nulo si intenta consultar cualquier elemento bajo el div #reactRoot creado por la propia reacción, probablemente porque React aún no ha terminado de representar el contenido de la aplicación.
El uso de console.log para registrar el cuerpo del iframe en la función de onload muestra el cuerpo completo y todos los widgets de la aplicación React en la consola. Creo que esto sucede porque el elemento del body registrado es solo una referencia y, cuando lo veo en la consola, el renderizado de React ya está terminado.
Cuando uso setTimeout de esta manera, también puedo acceder al cuerpo completo de la aplicación React porque la representación de React se completará antes de que se ejecute la función de tiempo de espera:
<body> <iframe id="frame" src="http://some/react/app"></iframe> <script> const frame = document.getElementById("frame"); frame.onload = () => { setTimeout(() => console.log(frame.querySelector("...")), 1000); } </script> </body>¿Hay una forma más confiable de esperar hasta que la aplicación React en el iframe haya terminado de renderizarse, o esperar una cantidad de tiempo arbitraria antes de acceder al dodocument del iframe es la única forma de hacerlo? No me gusta mucho esta solución porque esta solución fallará tan pronto como un dispositivo lento necesite más de un segundo para renderizar la aplicación React.
Puede sondear la existencia del elemento esperado una vez que se carga el marco.
const startPolling = () => { if (frame.querySelector("...")) { console.log('react is ready') return } setTimeout(startPolling, 1000) } frame.onload = () => { startPolling() }esta API puede brindarle ayudaMessageChannel , y puede publicar Mensaje cuando se haya montado la raíz de reacción