Tupale

iframe con altura relativa a la pagina en javascript

Antes de comenzar quiero aclarar que usar iframes es una técnica que no es muy buena para el SEO o la navegación de los sitios web, de manera que recomiendo que sea utilizado solo en casos realmente necesarios y que procures no utilizarlos para mostrar contenidos centrales.

Ahora este tip lo publico ya que me canse de buscar en Google un buen código para ajustar el alto de un iframe de manera dinámica al cargar su contenido, para evitar la parecencia de la barra de scroll en el iframe. Y si se estan preguntando porque no simplemente usar un 100% en el iframe, la razon es muy simple, el valor height en un iframe solo recibe valores en pixeles, no en porcentajes.

Este código JS (javascript deben agregarlo en el header de su sitio, es decir entre las etiquetas <head> y</head> y es la función que calcula el alto de la pagina y le pasa el valor de ese alto al iframe que queremos dimensionar.

<script type=”text/javascript”>
// Dynamic Iframe loader
function loadIframe(theURL) {
document.getElementById(“mainContent”).src=theURL;
}
// resizes Iframe according to content
function resizeMe(obj){
docHeight = mainContent.document.body.scrollHeight
obj.style.height = docHeight + ‘px’
}
</script>

Y ahora creamos el iframe dentro del body o cuerpo de la pagina

<iframe id=”mainContent” name=”mainContent” onload=”resizeMe(this)” src=”bb_menu.php” width=”100%” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ allowtransparency=”yes”></iframe>

Como ven el secreto esta en la funcion “OnLoad” de javascript que llama a la función resizeMe con el parámetro this, lo que hará que el javascript calcule el alto de la pagina cargada en el iframe y le pase el alto al objeto para dimensionar de manera automática.

Espero que les halla servido y si tienen dudas pueden contactarme.

5 comments for “iframe con altura relativa a la pagina en javascript

  1. 8 abril, 2011 at 2:35 PM

    exelente post. me sirvio perfecto 😀

  2. Jorge
    10 mayo, 2011 at 5:14 PM

    no sirve en IE, si la haces en IE mis respetos, eso es lo ando buscando hace horas.

    • 12 mayo, 2011 at 3:23 PM

      Yo lo he probado en IE8 y 9 y me ha funcionado relativamente bien,, voy a echarle una revisadita en IE7 y ver que se puede mejorar del script. xD

  3. Andres Wilches
    30 agosto, 2011 at 1:01 AM

    No funciona el codigo en mozilla 6.0!!

    • 30 agosto, 2011 at 4:44 PM

      Bueno pues cuando se hizo el código mozilla 6 no existía, voy a ver si lo puedo ajustar. xD

Deja un comentario

A %d blogueros les gusta esto: