2

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.

1 respuesta 1

0

Después de mucha búsqueda, he encontrado la solución con la lbrería react-iframe-resizer-super.

Para instalarla: npm install --save react-iframe-resizer-super iframe-resizer.

import ReactIframeResizer from 'react-iframe-resizer-super';


render() {
    const iframeResizerOptions = { autoResize: true };
    return (
                <React.Fragment>
                    <PageLayout pageTitle={title} hasBanner={false} backArrow={false}>
                        <Grid>
                            <ReactIframeResizer frameBorder="0" width="100%" src={tuUrl} iframeResizerOptions={iframeResizerOptions}></ReactIframeResizer>
                        </Grid>
                    </PageLayout>
                </React.Fragment>
            );
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.