Redimensionar iFrame en IE y Firefox con Javascript

Posted on por

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:

< View plain text >
javascript

  1. &lt;script language=&quot;javascript&quot;&gt;
  2. function grand(h)
  3. {
  4.   iframe=document.getElementById(&quot;mi_iframe&quot;)
  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(&quot;mi_iframe&quot;);
  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. &lt;/script&gt;

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

< View plain text >
HTML

  1. &lt;body onLoad=&quot;reSize(0)&quot;&gt;&lt;iframe id=&quot;mi_iframe&quot; src=&quot;iframe.php&quot; width=&quot;100%&quot; frameborder=&quot;0&quot; height=&quot;100%&quot;&gt;&lt;/iframe&gt;&lt;/body&gt;

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

< View plain text >
javascript

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

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

< View plain text >
HTML

  1. &lt;html&gt;&lt;body onLoad=&quot;redimensiona()&quot;&gt;&lt;table id=&quot;div_principal&quot;&gt;&lt;tr&gt;&lt;td&gt;Incluir contenido de la pagina&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;

Referencias:

A 2 personas les gusta esta entrada

3 pensamientos en “Redimensionar iFrame en IE y Firefox con Javascript”

  1. 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.

  3. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *