Blog Xplorastudios

Ya van varias veces que necesito que un iframe se escale automáticamente a la altura de la página que contiene, sobre todo en interfaces de administración. Cuando surgen estas dudas lo mejor es “googlear” en busca de respuestas, pero en éste caso, las primeras 10 páginas que he revisado contienen información errónea, que da errores en uno o varios navegadores.

Despues de varios intentos he dado con un código que funciona tanto en IE, como en Firefox como en Opera y/o Safari. (Requiere Jquery)

<iframe id='myiframe' src='http://www.midominio.com/contenido.html' style="width:100%;"></iframe><br /> <script type="text/javascript"> $(function() { var myiframe = $("#myiframe"); myiframe.hide().load(function() { if (myiframe.get(0).contentDocument) { iframebody=$(myiframe.get(0).contentDocument.body); } else { iframebody=$(myiframe.get(0).contentWindow.document.body); } myiframe.show().height(iframebody.height()+35); }); }); </script>

En caso de que queramos hacerlo de forma automática según su contenido podemos realizar unos pequeños cambios y crear un timeout que redimensione el iframe cada X segundos. (Ojo, personalmente no recomiendo utilizar timeouts recurrentes en entornos de producción, pero funcionar, funciona.)

<iframe id='myiframe' src='http://www.midominio.com/contenido.html' style="width:100%;"></iframe><br /> <script type="text/javascript"> function redimensionaIframe(myiframe) { if (myiframe.get(0).contentDocument) { iframebody=$(myiframe.get(0).contentDocument.body); } else { iframebody=$(myiframe.get(0).contentWindow.document.body); } myiframe.show().height(iframebody.height()+35); setTimeout(function() { redimensionaIframe(myiframe); },1000); } $(function() { var myiframe=$("#preview"); myiframe.hide().load(function() { redimensionaIframe(myiframe); }); }); </script>

IMPORTANTE: la url del iframe debe ser del mismo dominio, los navegadores no permiten acceder al iframe mediante javascript si el contenido es de otro dominio. Más información sobre XSS