Redimensionado de iframe al tamaño de la página contenida

Publicado en Programación el 8 de June de 2009 por Manel Pérez Mata
Tags: ,

Con este sencillo código JavaScript, ajustamos la altura del iframe al tamaño de la página en él conteido, de ese modo, evitaremos el molesto scroll lateral.

<html>
    <body>
        <script language="JavaScript">
            //Ajusta el tamaño de un iframe al de su contenido interior para evitar scroll
            function autofitIframe(id){
                if (!window.opera && document.all && document.getElementById){
                    id.style.height=id.contentWindow.document.body.scrollHeight;
                } else if(document.getElementById) {
                    id.style.height=id.contentDocument.body.scrollHeight+"px";
                }
            }
        </script>
        <iframe id="miFrame" src="http://www.tecnoretales.com/" width="100%" height="0" frameborder="1" transparency="transparency" onload="autofitIframe(this);"></iframe>
    </body>
</html>

Una vez cargado el iframe, llamamos a la función autofitIframe que se encargará de obtener la altura total de la página contenida y se la asignará al tamaño del iframe.
Simplemente…

Compártelo!! These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Meneame
  • BarraPunto
  • Technorati
  • Google Bookmarks
  • Facebook
  • LinkedIn
  • del.icio.us
  • Digg
  • Reddit
  • Live-MSN
  • MySpace
  • TwitThis
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

6 Comments on “ Redimensionado de iframe al tamaño de la página contenida ”

  • Ignacio Alcázar
    April 18th, 2010 23:46

    Tenía un código parecido por algún lado pero no lo encontraba. Muchas gracias.

  • Avolaje
    April 30th, 2010 0:13

    Gracias por el script para redimensionar automáticamente un iframe. He probado algunos script que aparecen en internet y este me parece el mejor.

    Adán Valenzuela Olaje

  • javirol
    September 6th, 2010 0:15

    Hola, es un código interesante y parece que funciona, aunque estoy embebiendo un foro en Wordpress y con este y otros códigos redimensiona bien, pero supongamos que lo hace a 1000 px, cuando vuelvo al index del foro que tiene por ejemplo 200px se queda de nuevo en 1000px presentando el resto en blanco.

    Sabes a que se puede deber esto? el tipo de foro es phpbb y lo he probado simplemente con iframe, sin contenedores. Me ayudaría bastante saber porque puede pasar esto.

  • Ronald
    November 13th, 2010 16:44

    Buen codigo…he probado otros y son muy confusos y no funcionan tanto en IE como en Mozilla

  • mariana
    June 20th, 2011 23:28

    gracias eres un genio, me sirvio de mucho el aporte

  • stroldj
    September 15th, 2011 11:38

    Buenas:

    A ver si alguién lo lee i me da una respuesta….

    He usado el codigo, antes de nada GRACIAS, funciona bastante bien.. porque digo bastante? pues porque me ha surgido un problemilla:

    Estoy intentando poner el iframeen cuestión dentro de una tabla, o en una pagina contenida por otra con otro iframe, (todo cuestion de centrado de la pagina). Entonces “peta”, aperece el contenido una fracción de segundo y desaparece todo el contenido. (si quito la funcion se ve)

    a ver si alguien se le ocurre algo

    Gracias

Leave a Reply