Noticias
Entradas
Comentarios
hacker emblem

Ha sido especialmente tedioso conseguir que para un iframe, se me redimensionara la altura dependiendo del contenido que se cargara dentro de éste. Firefox lo realizaba a la perfección, pero no así Internet Explorer. Tomando un par de referencias me he construido la solución que quiero compartir.

En el archivo que declara el iframe:

javascript

  1. <script language="javascript">
  2. function grand(h)
  3. {
  4.   iframe=document.getElementById("mi_iframe")
  5.   iframe.height=h;
  6. }
  7. function reSize(h)
  8. {  
  9.     try
  10.   {
  11.     var oBody   =   mi_iframe.document.body;
  12.     var oFrame  =   document.all("mi_iframe");
  13.        
  14.         oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);
  15.         oFrame.style.width = oBody.scrollWidth + (oBody.offsetWidth - oBody.clientWidth);
  16.     }
  17.     catch(e) //An error is raised if the IFrame domain != its container's domain
  18.     {
  19.      window.status =    'Error: ' + e.number + '; ' + e.description;
  20.     }
  21. }
  22. </script>

En el mismo fichero, declaramos el iframe y colocamos esto en el body para IE:

  1. <body onLoad="reSize(0)"><iframe id="mi_iframe" src="iframe.php" width="100%" frameborder="0" height="100%"></iframe></body>

En el contenido del iframe (iframe.php en el ejemplo):

javascript

  1. <script language="javascript">
  2.      function redimensiona()
  3.      {
  4.       var navegador = navigator.appName
  5.       if (navegador == "Microsoft Internet Explorer")
  6.       {
  7.         top.reSize(0);
  8.       }
  9.       else
  10.       {
  11.         principal=document.getElementById("div_principal");
  12.         top.grand(principal.scrollHeight+40);
  13.       }      
  14.      }
  15. </script>

El código HTML del contenido de este iframe sería algo así como:

  1. <html><body onLoad="redimensiona()"><table id="div_principal"><tr><td>Incluir contenido de la pagina</td></tr></table></body></html>

Referencias:

A 2 personas les gusta esta entrada

3 Comentarios a “Redimensionar iFrame en IE y Firefox con Javascript”

  1. Omar Pérez dice:

    Gracias neonigma, me sirvio de mucho, justo lo que estaba buscando, como hacer compabibles los benditos iframe, estoy actualizando una web, y buscando como trabajar con iframe encontre tu aporte, gracias de nuevo.
    Si tuvieras algun ejemplo de captcha en JSP te lo agradecería, estoy aplicando niveles de seguridad a un sistema en JAVA. te agradecería mucho si me ayudaras.
    Suerte.

  2. neonigma dice:

    Me alegro que te sirviera, Omar.

    Lamentablemente no soy de JSP, soy de PHP, pero buscando en Google encuentras fácilmente referencias a Captchas, ésta es la primera que me sale a mi:
    http://nachxs.wordpress.com/2008/11/18/creando-un-captcha-con-jsp/

    Un saludo.

  3. Raquel dice:

    Neonigma muchas gracias justo es lo que estaba buscando. Pero creo que no me funciona del todo. Soy una novata, y estoy creando una página web con dreamweaver, la cual contiene un iframe. Lo dicho, en Firefox no hay ningún problema pero en Internet Explorer se me queda una ventanita muy pequeña. He añadido tu código y se me ha alargado la ventanita del iframe en IE a lo largo, pero no a lo ancho. No sé si podrías ayudarme por favor…. te pongo mi código:
    ***El archivo que declara el iframe:

    function grand(h)
    {
    iframe=document.getElementById(“flotante”)
    iframe.height=h;
    }
    function reSize(h)
    {
    try
    {
    var oBody = flotante.document.body;
    var oFrame = document.all(“flotante”);

    oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight – oBody.clientHeight);
    oFrame.style.width = oBody.scrollWidth + (oBody.offsetWidth – oBody.clientWidth);
    }
    catch(e) //An error is raised if the IFrame domain != its container’s domain
    {
    window.status = ‘Error: ‘ + e.number + ‘; ‘ + e.description;
    }
    }

    ***El archivo del contenido del iframe:

    function redimensiona()
    {
    var navegador = navigator.appName
    if (navegador == “Microsoft Internet Explorer”)
    {
    top.reSize(0);
    }
    else
    {
    principal=document.getElementById(“div_principal”);
    top.grand(principal.scrollHeight+40);
    }
    }

    Bienvenidos a nuestra página web

Dejar un comentario