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>
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>
function redimensiona()
{
top.grand(document.body.scrollHeight);
}
</script>
En la etiqueta body añadir el parámetro:
onLoad=”redimensiona();”
COMPARTIR:
|
|
|
|
|
Inicio
Colabora
Entradas (RSS)
Comentarios (RSS)
4 CONECTADOS
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?
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.
24 de Noviembre, 2007 - 0:58
la H es la altura del iframe, fijate…
iframe.height=h;
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.
16 de Mayo, 2008 - 8:45
Ejemplo: http://muebles-lara.es/
13 de Noviembre, 2008 - 23:27
Mil Gracias si vieras pase hrs tratatndo de hacerlo muchas gracias
13 de Noviembre, 2008 - 23:59
de nada
23 de Noviembre, 2008 - 22:29
< body onLoad="redimensiona();" >
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.
23 de Enero, 2009 - 17:52
Tres días buscando una solución que funcionara y por fin la encuentro…mil gracias y enhorabuena ¡¡
12 de Febrero, 2009 - 21:32
Correcto, me funciona muy bien, gracias
25 de Febrero, 2009 - 13:25
Muchas gracias!!!! llevaba tiempo buscando algo que me solucionase ese problema!
27 de Mayo, 2009 - 13:39
no se si lo has probado hace mucho, pero esto con los nuevos navegadores no chuta.
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.
20 de Agosto, 2009 - 16:48
[…] Clip de pelicula […]
15 de Mayo, 2010 - 1: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?
26 de Mayo, 2010 - 10:57
Genial, funciona en IE 8, IE 7 y FF 3.6