Jul
30 Iframe que adapta su altura (height) al contenido

Publicado el 30 de Julio, 2007

Con este código javascript conseguimos que nuestro iframe adapte su altura al contenido que se cargue. Es muy sencillo de usar y funciona tanto en Mozilla como en Explorer.
En la etiqueta head del documento (padre) que contiene el iframe ponemos lo siguiente:

<script>
     function grand(h) {
          iframe=document.getElementById("ifr")
          iframe.height=h;
     }
</script>

El iframe seria:

<iframe src="pagina.html" id="ifr" frameborder="0" width="300" height="50" name="ifr" scrolling="no"></iframe>

Donde pone “src” ponemos el documento a llamar, es importante que el “id” y “name” sea ifr, sino tendriamos que cambiar el javascript del head. En el “height” podemos poner lo que queramos porque luego se adaptará.

Por último en todos los documentos (hijos) que se vayan a cargar en el iframe, en el head ponemos:

<script>
     function redimensiona()
     {
          top.grand(document.body.scrollHeight);
     }
</script>

En la etiqueta body añadir el parámetro:

onLoad=”redimensiona();”


COMPARTIR: Menéame | Facebook | twitter | technorati | delicious | bitacoras


Esta entrada fue publicada el Lunes, 30 de Julio de 2007 a las 8:58 y está clasificada bajo: Javascript . Puede hacer un seguimiento de los comentarios de esta entrada gracias al feed RSS 2.0 . Puede dejar un comentario, o enviar un trackback desde su sitio.


« Listado de directorios CSS
Wind Shaped Pavillion, un edificio que se mueve con el viento »

15 comentarios sobre “Iframe que adapta su altura (height) al contenido”

  1. No funciona dijo:
    24 de Noviembre, 2007 - 0:26

    No me funciona el script. Acaso falta llamar al primer script en alguna parte? y el “h” que esta como parametro… que es?

  2. admin dijo:
    24 de Noviembre, 2007 - 0:57

    Sube el ejemplo a algún servidor y le hecho un vistazo si quieres, sigue los pasos porque a mi si que me funciona.

  3. admin dijo:
    24 de Noviembre, 2007 - 0:58

    la H es la altura del iframe, fijate…

    iframe.height=h;

  4. 111 dijo:
    15 de Mayo, 2008 - 23:05

    oye…ami tampoco me funciona

    podrias poner una pagina de ejemplo???

    asi nos damos cuenta que esta mal…

    por favor notificame por e mail.

  5. admin dijo:
    16 de Mayo, 2008 - 8:45

    Ejemplo: http://muebles-lara.es/

  6. Jaime dijo:
    13 de Noviembre, 2008 - 23:27

    Mil Gracias si vieras pase hrs tratatndo de hacerlo muchas gracias

  7. admin dijo:
    13 de Noviembre, 2008 - 23:59

    de nada ;)

  8. admin dijo:
    23 de Noviembre, 2008 - 22:29

    < body onLoad="redimensiona();" >

  9. cesar dijo:
    23 de Noviembre, 2008 - 22:34

    Pues eso, lo último que ha puesto el admin, pero quitando las comillas, la coma y punto y los espacios entre los triángulos sin base horizontales.

    Mil una gracias de un supernovato.

    Un saludo.

  10. Malva dijo:
    23 de Enero, 2009 - 17:52

    Tres días buscando una solución que funcionara y por fin la encuentro…mil gracias y enhorabuena ¡¡

  11. C@mpi dijo:
    12 de Febrero, 2009 - 21:32

    Correcto, me funciona muy bien, gracias

  12. raq dijo:
    25 de Febrero, 2009 - 13:25

    Muchas gracias!!!! llevaba tiempo buscando algo que me solucionase ese problema!

  13. david dijo:
    27 de Mayo, 2009 - 13:39

    no se si lo has probado hace mucho, pero esto con los nuevos navegadores no chuta.

  14. SPENCER dijo:
    23 de Julio, 2009 - 22:29

    Amigo muchas gracias por colocar este codigo en la web. Me sirvio de mucho , muy bueno ehh gracias muchas gracias.

  15. Redimensionar iFrame en IE y Firefox con Javascript | El blog de neonigma dijo:
    20 de Agosto, 2009 - 16:48

    […] Clip de pelicula […]

Deje un comentario