make iframe height fit content

Question

¿Cómo puedo hacer que la altura de un iframe se ajuste al contenido que contiene? Supongo que calcularía la diferencia entre la altura del contenido y la altura del cuadro flotante (algo que no sé cómo hacer) y lo usaría con un ciclo while para incrementar una variable para usarla como una altura, pero no puedo ajustar mi mira cómo hacer estas cosas en realidad. Antes de preguntar: sí, el contenido en el marco es de mi sitio. No entre dominios.

Answer 1

No estoy seguro de por qué desea utilizar un iframe y no un div dinámico lleno, por ejemplo, a través de AJAX, pero:

poner el contenido dentro del marco flotante en un div, a continuación, obtener la altura de la div. Me gustaría sugerir el uso de jQuery, así:

$("#divId").height(); 

Pero si no se puede utilizar jQuery, usted debería ser capaz de utilizar este:

document.getElementById("divId").offsetHeight; 

Entonces que había necesidad de ajustar la altura del iframe a lo que sea que tengas

jquery:

$("#iframeId").height($("#divId").height()); 

js regulares:

document.getElementById("iframeId").style.height = 
document.getElementById("divId").offsetHeight; 

Answer 2

<iframe id="moo" src="something.html"><iframe> 
<script> 
function onContentChange(){ 
    var NewSize=$('moo').getScrollSize(); 
    $('moo').setStyles({ 
    width: NewSize.x, 
    height: NewSize.y 
    }); 
} 
</script> 

y dentro del somthing.html, en el fondo o proceso de carga hacen algo en las líneas de

window.parent.window.onContentChange() 

Answer 3

Renderizar dinámicamente el iframe en javasc ript una vez que el elemento contenedor ("td1") ha sido dibujado.

<script type="text/javascript"> 
    var iframesrc = "@Href("~/about")"; 
    function init() { 
    var vHeight = document.getElementById("td1").offsetHeight; 
    document.getElementById("td1").innerHTML="<iframe style=\"width:100%; height:" + vHeight + "px\" src=\"" + iframesrc + "\"></iframe>"; 
    } 
    window.onload = init; 
</script> 

...

<td id="td1" style="width: 100%; height:100%;">     
</td> 

Answer 4

he aquí una solución usando jQuery:

$('#iframe').height($('#iframe').contents().find('body').height());