Acceder al contenido principal

Blog

Volver a Blog

Cómo hacer un iframe responsive

20 Ago 019
redimensionar iframe dinamicamente
Avatar Fernando González

Diseño

Buenas a todos, vamos a ver cómo podemos hacer de una vez un iFrame responsive, o al menos que dependa de alguna variable de la web, como en este ejemplo, haremos que dependa de otro bloque, que puede ser un div, la propia ventana del navegador, o lo que queramos.

Empezamos:

1 javascript

2 tener nuestro iframe funcionando y con algunos estilos básicos

3 le damos caña:

Os dejo una captura del código de la funcion JS que se encargará de redimensionar y actualizar el iFrame (Explicado jeje)

js resize iframe

Os dejo el código para que no tengáis que escribir ;)
<code>

//Redimensiona un iFrame dinamicamente
function myIFrameResize(){
    //Obtenemos la altura que queremos dar al iFrame con la clase del div de referencia
    var altura = document.getElementsByClassName("flex-slider-custom")[0].clientHeight;
    //Obtenemos el objeto iframe por su ID
    var iframe = document.getElementById("visita-virtual");

    //Setea nueva dimension
    iframe.height = altura;

    //Recarga de contenido tras la redimension
    iframe.src = iframe.src;
}

//Nuestra funcion autoejecutable al cargar la web
window.onload = function(){

    //Si necesitamos redimensionar nada mas cargar la pagina llamamos a la funcion
    myIFrameResize();

    //Manejador que lee si cambia algo (en este caso si se redimensiona la ventana del nav)
    window.onresize = function(){
        myIFrameResize();
    }

};

</code>

 

Bueno, básicamente lo que hacemos es poner un manejador que escucha continuamente si se redimensiona la ventana del navegador, si es así, entonces obtiene la altura del div con clase "flex-slider-custom", y se la aplica a nuestro querido iFrame.

Espero que os funcione saludos!!!

 

Comentarios

Añadir nuevo comentario