En una pantalla de mi aplicación, he creado un iframe en el cual quiero que se actualice la altura según el contenido de lo que tenga dentro del iframe, es decir, dentro del iframe tengo otra aplicación (del mismo dominio) con varias pantallas, unas más altas que otras, y necesito que la altura se redimensione (no tener una altura fija, por si hay una pantalla más alta y salga un scroll). Ya se que hay muchas preguntas sobre esto, pero ninguna consigue hacer lo que necesito.
Al iframe le he puesto un onLoad que me lleve a la función resizeIframe
.
resizeIframe = () => {
var iframe = document.getElementById("idFrame");
if(iframe != null && iframe != undefined){
var heightContenido = iframe.contentWindow.document.body.scrollHeight;
iframe.height = heightContenido;
}
}
return (
<React.Fragment>
<PageLayout pageTitle={title} hasBanner={false} backArrow={false}>
<Grid>
<iframe id='idFrame' frameBorder="0" onLoad={() => this.resizeIframe()} src={srcIframe} width="100%"/>
</Grid>
</PageLayout>
</React.Fragment>
);
En la función, lo que he hecho ha sido recoger la altura de la página contenida en el iframe, y ya teniendo la altura del contenido , puedo igualar la altura del iframe a esta. Al cargar la pantalla si que se redimensiona bien, pero al ir a otras pantallas dentro del iframe obviamente no...
He intentado ponerle al iframe onMouseOver={() => this.resizeIframe()}
para que al tener el mouse encima haga la función y redimensione, he intentado también otros eventos como onClick
, onMouseMove
, etc.
Espero que podáis ayudarme a resolverlo, muchas gracias.