javascript - example - Hacer que un iframe tome espacio vertical

iframe without scroll

Question

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

¿Hay alguna solución?

Answer 1

La solución no es usar <iframe> y preprocesar el código en el lado del servidor.

Answer 2

Este fragmento de CSS debería eliminar la barra de desplazamiento vertical:

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

Todavía no estoy seguro de que ocupe todo el espacio vertical que necesita, pero veré si no puedo resolverlo.

Answer 3

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

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

ver W3C DOCTYPE para ejemplos

Estaba teniendo problemas tanto con IE como con FF, ya que estaba renderizando el documento de iframe en modo ''peculiaridades'', hasta que agregué el DOCTYPE .

Soporte de FF / IE / Chrome: .scrollHeight no funciona con Chrome, así que he creado un ejemplo de javascript que usa jQuery para establecer todas las alturas de IFRAME en una página según el contenido de los 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

Esto debería establecer la altura de IFRAME 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 scrolling="no" a su IFRAME para desactivar las barras de desplazamiento.

editar: Vaya, se olvidó de declarar the_height .

Answer 5

También consulte este hilo: ¿Cómo cambia DiggBar dinámicamente la altura de su iframe en función del contenido que no está en su dominio? .

Se dirige a la misma pregunta.