Cómo hacer que un iframe tome espacio vertical

Question

Me gustaría que un iframe ocupe tanto espacio vertical como lo necesite para mostrar su contenido y no mostrar una barra de desplazamiento. ¿Es posible?

¿Hay alguna solución?

Answer 1

Esto debe establecer la altura IFRAME a la altura de su contenido:

<script type="text/javascript"> 
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight; 
document.getElementById('the_iframe').height = the_height; 
</script> 

es posible que desee agregar a su scrolling="no"IFRAME para desactivar las barras de desplazamiento.

editar: Vaya, se olvidó de declarar the_height.

Answer 2

Este fragmento de CSS debe quitar la barra de desplazamiento vertical:

body { 
    overflow-x: hidden; 
    overflow-y: hidden; 
} 

No estoy seguro todavía de tener que ocupan tanto espacio vertical, ya que necesita, pero voy a ver si no puedo entender fuera.

Answer 3

Adición de una declaración DOCTYPE al documento de origen IFRAME le ayudará a calcular el valor correcto de la línea

document.getElementById('the_iframe').contentWindow.document.body.scrollHeight 

ver W3C DOCTYPE for examples

que estaba teniendo problemas con IE y FF, ya que estaba prestando la iframe documento en modo 'peculiaridades', hasta que agregué el DOCTYPE.

Compatibilidad con FF/IE/Chrome: .scrollHeight no funciona con Chrome, así que he creado un ejemplo de javascript que usa jQuery para establecer todas las alturas IFRAME en una página según el contenido de iframes. NOTA: Esto es para páginas de referencia dentro de su dominio actual.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('iframe').each(function(){ 
      var context = $(this); 
      context.load(function(event){ // attach the onload event to the iframe 
       var body = $(this.contentWindow.document).find('body'); 
       if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents 
        context.height($(body.get(0)).height() + 20); 
       } else { 
        context.hide(); // hide iframes with no contents 
       } 
      }); 
     }); 
    }); 
</script> 

Answer 4

La solución no es utilizar y el código de preproceso en el lado del servidor.

Answer 5

También vea este hilo: How does the DiggBar dynamically resize its iframe's height based on content not on their domain?.

Responde la misma pregunta.