Cómo auto encoger la altura del iframe dinámicamente?

Utilizo el siguiente código para lograr la altura dinámica del iframe :

En el :

  function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }  

En el :

   

Este código funciona bien con solo boost la altura. Entonces, cuando el contenido dentro del iframe aumenta en altura, el iframe actualiza su altura y aumenta con ella.

El problema es cuando la altura disminuye o se reduce . Cuando el contenido dentro del iframe disminuye, no disminuye y causa un gran espacio en blanco no deseado. Esto solo ocurre en Chrome , IE & FF funciona bien.

Aquí está mi página

¿Quiero saber cómo hacer que este código funcione para reducir automáticamente la altura del iframe cuando disminuye?

Captura de pantalla uno:

Captura de pantalla uno

Captura de pantalla dos:

Captura de pantalla dos


Actualización 1

Coloqué el siguiente código en

   $(function(){ var iframeDoc = $('iframe[name="dservers"]').contents().get(0); $('iframe[name="dservers"]').load(function(){ docHeight = $(iframeDoc).height(); $('iframe[name="dservers"]').height( docHeight ); }); }); 

El código iframe en el

  

El iframe no se muestra en la página. Aparece por un segundo y luego desaparece.


Actualización 2

Creo que el problema era el carácter $ antes (function(){ , lo quité. Lo siento, no tengo mucha experiencia con jquery. Actualicé la página y onload="resizeFrame()" pero el iframe no actúa dinámicamente ahora.

Problema resuelto

Estaba cavando en Internet y encontré un código que resolvió todo el problema para mí. Me gustaría compartirlo para que cualquiera pueda usarlo para obtener la altura dinámica del iframe.

Primero , coloque el siguiente código entre las tags :

    

Segundo , el código Iframe en el :

   

Tercero y último, el CSS:

 #myiframeid{ width: 100%; } 

Nota: debe tener Nombre e ID para el Iframe.

Compatible con todos los navegadores ( Chrome , Firefox , IE ).

¡Tenga un buen día!

Escribí una pequeña biblioteca que trata todos estos problemas y mantiene el tamaño iframed cuando el contenido cambia o la ventana del navegador cambia de tamaño.

https://github.com/davidjbradshaw/iframe-resizer

Pensé en ello un poco, y creo que se me ocurrió otra solución que puede resolver su problema desde el documento principal. En lugar de editar los documentos en su iframe. Sin embargo, no puedo probarlo debido a la política de origen cruzada. Pruébelo y dígame cómo funciona.

 var iframeDoc = $('iframe[name="dservers"]').contents().get(0); $('iframe[name="dservers"]').load(function(){ docHeight = $(iframeDoc).height(); $('iframe[name="dservers"]').height( docHeight ); }); 

Espero que esto lo haga por ti.

Editar: Esta solución requiere que elimine la función onload = “”.

Edit-2: Parece que ha combinado los dos guiones. Tu tienes esto:

  function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; var iframeDoc = $('iframe[name="dservers"]').contents().get(0); $('iframe[name="dservers"]').load(function(){ docHeight = $(iframeDoc).height(); $('iframe[name="dservers"]').height( docHeight ); }); } 

Reemplaza todo el script con esto:

 $(function(){ var iframeDoc = $('iframe[name="dservers"]').contents().get(0); $('iframe[name="dservers"]').load(function(){ docHeight = $(iframeDoc).height(); $('iframe[name="dservers"]').height( docHeight ); }); }); 

Y elimine onload = “resizeFrame ()” de la etiqueta iframes.