Hacer que un iframe se ajuste a la altura de una ventana con Javascript

  • Por
Vamos a definir dinámicamente con javascript el tamaño de un iframe para que se ajustar el marco al espacio disponible en la ventana del navegador.
Tengo una página que tiene un iframe y quiero que ocupe el espacio máximo disponible, pero no dispongo de toda la página, porque hay otros contenidos en la página. Además, como a veces la ventana del navegador es más grande o más pequeña, el espacio que puedo asignar al iframe es distinto.

En este taller de Javascript vamos a realizar un cálculo del espacio disponible en la página para que un iframe que tenemos dentro ocupe la mayor área posible. Todo teniendo en cuenta que cada usuario puede entrar con una definición de pantalla distinta y con un navegador distinto.

Nota: Recordamos que un iframe es un frame que se puede insertar en el cuerpo de una página, asignando una altura y una anchura. Podemos ver una explicación detallada en http://www.desarrolloweb.com/articulos/667.php

Antes que nada me gustaría que se entendiese bien el problema con el que me encuentro, al no saber qué área hay disponible en la página para cada usuario que nos visita.

Veamos esta imagen, que nos puede aclarar rápidamente el caso en el que nos encontramos.


Imaginemos una definición de 800 x 600. Entonces el espacio para el iframe será el tamaño útil donde se visualiza la página, menos el espacio reservado para la cabecera. Ahora, por ejemplo en una definición de 1280 x768, como el espacio útil para la página es mayor, el espacio en el que quiero que se vea mi iframe también será mayor. Sigue siendo el tamaño útil donde se visualiza la página, menos el espacio reservado para la cabecera, pero como ahora el espacio útil es mayor, el iframe también tiene que presentarse con mayor tamaño.

La solución pasa por utilizar un Javascript para calcular el espacio útil de la página y restarle el espacio de la cabecera. Entonces tendremos la dimensión altura que tiene que tener el iframe.

Para calcular este dato tenemos que tener en cuenta que Internet Explorer y Firefox tienen modos distintos. Es decir, la propiedad espacio útil de la página es distinta en estos dos browser, por lo que el script se puede complicar un poco.

En Internet Explorer: el espacio útil se calcula con la propiedad document.body.clientHeight.

En Mozilla Firefox: el espacio útil nos lo devuelve la propiedad window.innerHeight

Con este script podemos calcular el tamaño que debemos reservarle al iframe:

if (window.innerHeight){
   //navegadores basados en mozilla
   espacio_iframe = window.innerHeight - 110
}else{
   if (document.body.clientHeight){
      //Navegadores basados en IExplorer, es que no tengo innerheight
       espacio_iframe = document.body.clientHeight - 110
   }else{
       //otros navegadores
       espacio_iframe = 478
   }
}


El primer if sirve para los navegadores Firefox, Netscape y similares, que entienden la propiedad window.innerHeight

El segundo if es para IExplorer que conoce document.body.clientHeight.

En los dos casos tenemos que restarle 110, que es el espacio que ocupa la cabecera. El último if es por si acaso no entiende ninguna de las dos propiedades el javascript, para darle un valor por defecto.

Luego, escribiríamos mediante javascript la etiqueta iframe con los datos obtenidos previamente:

document.write ('<iframe frameborder="0" src="mipagina.html" width="770" height="' + espacio_iframe + '">')
document.write ('</iframe>')


¿Y qué pasaría si los navegadores no entienden Javascript, o está deshabilitado?

En ese caso nos conviene utilizar la etiqueta noscript, para mostrar un iframe con los valores por defecto (noscript sólo se tiene en cuenta si no hay soporte para javascript):

<noscript>
<iframe frameborder="0" src="mipagina.html" width="770" height=478>
</iframe>
</noscript>


El código completo sería el siguiente:

<script>
if (window.innerHeight){
   //navegadores basados en mozilla
   espacio_iframe = window.innerHeight - 110
}else{
   if (document.body.clientHeight){
       //Navegadores basados en IExplorer, es que no tengo innerheight
       espacio_iframe = document.body.clientHeight - 110
   }else{
       //otros navegadores
       espacio_iframe = 478
   }
}
document.write ('<iframe frameborder="0" src="mipagina.html" width="770" height="' + espacio_iframe + '">')
document.write ('</iframe>')
</script>
<noscript>
<iframe frameborder="0" src="mipagina.html" width="770" height=478>
</iframe>
</noscript>

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

ignacio

02/2/2007
muy bueno el informe, pero mi problema radica, en que si yo deseo abrir una página dentro del iframe, y esta es de mayor altura.
¿cómo regular "la altura del iframe", dependiendo de la página que se cargue dentro de este? (que ocupe el tamaño de la página a abrir, no el total de la alura del navegador).
Saludos

martin grandez

14/6/2007
Esto era lo que estaba buscando...Deben anunaciar que existe este codigo gratis por el google...gracias.martin grandez

Augusto

17/6/2010
Otra solución
Otra solución es utilizar directamente Frames, para este tipo de problemas, asi no dependes tando del Scrip y el tipo de navegador.

Fabricio Leon

02/9/2010
Respondiendo a Ignacio
Saludos Ignacio, considero que en la pagina que se abrira dentro del iframe, debes ponerle un id a la etiqueta html, de tal manera que sea elegible para calcular su tamano.

Luego, debes crear un script al pie del cierre del </html> en este script buscaras el objeto html usando el id que le diste y le diras que su tamano se transfiera a su objeto padre que en este caso seria el iframe contenedor.

Asi por ejemplo:

<html id="MiPagina">
Aqui va el contenido de toda tu pagina....
</html>
<script>
$get('MiPagina').parent.style.height = $get('MiPagina').style.height;
</script>

Espero que haber aportado ideas. Saludos.

Y unas cuantas ideas mas en:

http://fabricioleon.wordpress.com

FabricioLeon

02/9/2010
Tamano del Iframe en base a su pagina interna
Saludos Ignacio, considero que en la pagina que se abrira dentro del iframe, debes ponerle un id a la etiqueta html, de tal manera que sea elegible para usar su tamano.

Luego, debes crear un script al pie del cierre del </html> en este script buscaras el objeto html usando el id que le diste y le diras que su tamano se transfiera a su objeto padre que en este caso seria el iframe contenedor.

Asi por ejemplo:

<html id="MiPagina">
Aqui va el contenido de toda tu pagina....
</html>
<script>
$get('MiPagina').parent.style.height = $get('MiPagina').style.height;
</script>

Espero que haber aportado ideas. Saludos.

Y unas cuantas ideas mas en:

http://fabricioleon.wordpress.com

Marcos

21/6/2011
Anda perfecto
Mi problemas son, en IE explore no se por que no funciona, y lo otro es que yo en mi pagina tengo la botonera dentro de un div estos botones vinculan todo dentro del iframe. Ahora bien cuando hago scroll el div queda fijo por encima del iframe, haciendo que se encime al contenido html cargado. Como hago para que se desplace junto con todo el contenido para evitar que se encime.

Desde ya gracias

Pablo

12/6/2012
Excelente. Muchas gracias.
Agradezco la explicación me fue muy útil para comprender como trabajar con la altura máxima.

Jesu

07/11/2012
Espacio en blanco Iframe
Hola,

He intentado poner un iframe en la página http://planbclub.es y me sale un espacio en blanco debajo que no se cómo quitar.

El html de la caja no tiene nada para que salga este espacio.

Lo he instalado poniendo estos códigos.

Un css en la página:
<style type="text/css">
#outerdiv
{
width:1000px;
height:400px;
overflow:hidden;
position:relative;
zoom: 0.75;
-moz-transform: scale(0.70);
-moz-transform-origin: 0 0;
-o-transform: scale(0.70);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.70);
-webkit-transform-origin: 0 0;
}

#inneriframe
{
position:absolute;
top:-435px;
left:-50px;
width:1000px;
height:830px;
}
</style>

Y un html en la caja de texto:
<div id="outerdiv"><iframe id="inneriframe" name="inneriframe" width="200" height="120" src="http://www.planbviajes.com" scrolling="no"></iframe></div>

He probado todos los ajustes y no lo he podido quitar, que puede ser??

no sale, ni en explor, ni en mozzila, necesito ajustar el tmaño de un ifrmae, segun el contenido

07/6/2013
AYUDAA
AYUDAA

Martin

10/11/2013
En HTML5 Ajustado con hojas de estilo
Excelente aporte, aunque se que es de algunos ayeres, pero funciona excelente
aquí lo meti en HTML5 con un manejo de estilo y funciona correctamente
style="width: 700px; overflow: auto; height: 478"

silvia

03/11/2015
Funciona!
muchas gracias!! me funciono perfecto

eyal

18/12/2015
Se puede ocultar parte del contenido de una web atraves de un iframe
Estimado me pidieron que incluya un motor de busqueda de paquetes aeros en una web y me dieron el siguiente link http://www.e-agencias.com.ar/enytour pero como veran tiene toda la informacion de la empresa, que lo hace redundante en la pagina de la empresa, ellos tiene un sitio joomla y mi idea es meterlo en un modulo con iframe, pero hasta hora en mi ignoracia, solo pude modificaralo el ancho y alto. pero esto no me permite ocultar lo que no va, la idea es que solamente se vea el buscador.
alguna idea para ayudarme???
Muchas Gracias