Iframe que adapta su altura (height) al contenido

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();»

19 Comentarios
  1. No funciona says: 24 noviembre 20070: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 says: 24 noviembre 20070: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 says: 24 noviembre 20070:58

    la H es la altura del iframe, fijate…

    iframe.height=h;

  4. 111 says: 15 mayo 200823: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 says: 16 mayo 20088:45
  6. Jaime says: 13 noviembre 200823:27

    Mil Gracias si vieras pase hrs tratatndo de hacerlo muchas gracias

  7. admin says: 13 noviembre 200823:59

    de nada 😉

  8. admin says: 23 noviembre 200822:29

    < body onLoad="redimensiona();" >

  9. cesar says: 23 noviembre 200822: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 says: 23 enero 200917:52

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

  11. C@mpi says: 12 febrero 200921:32

    Correcto, me funciona muy bien, gracias

  12. raq says: 25 febrero 200913:25

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

  13. david says: 27 mayo 200913:39

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

  14. SPENCER says: 23 julio 200922:29

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

  15. […] Clip de pelicula […]

  16. Fernando figueroa says: 15 mayo 20101:46

    Hola, a mi no me funciona. Lo que quiero lograr es que la página que cargo en el iframe, aumenta o disminuye su tamaño con unos comentarios que se agregan, mi pregunta es: ¿Cómo le hago para que el iframe, según aumenta o disminuye la página que contiene, el iframe se haga más grande o más chico, según cambie de tamaño la página?

  17. yo mismo says: 26 mayo 201010:57

    Genial, funciona en IE 8, IE 7 y FF 3.6

  18. JUANJUS says: 5 octubre 20105:37

    Muy bueno tu aporte realmente me sacaste de un apuro. UN MILLON DE GRACIAS.

  19. Eduardo says: 25 marzo 20110:24

    No me funciona en chrome, alguna solución?

Comentarios