Wysokość iframe pasuje do treści

Question

Jak ustawić wysokość elementu iframe do zawartości w nim? Zakładam, że obliczyłbyś różnicę między wysokością treści a wysokością iframe (coś, czego nie wiem, jak to zrobić) i używałam tego z pętlą while do zwiększania zmiennej do użycia jako wysokości, ale nie mogę zawijać porozmawiajmy o tym, jak naprawdę robić te rzeczy. Zanim zapytam: tak, treść w ramce pochodzi z mojej strony. Nie w wielu domenach.

Answer 1

Nie całkiem pewien, dlaczego chcesz używać iframe, a nie dynamiczne div wypełniony, powiedzmy, za pośrednictwem ajax, ale:

Umieść zawartość w iframe do div, a następnie uzyskać wysokość div. Sugeruję użyciu jquery tak:

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

Ale jeśli nie można użyć jQuery, powinieneś być w stanie korzystać z tego:

document.getElementById("divId").offsetHeight; 

Potem trzeba ustawić wysokość iframe za do wszystkiego, co masz.

jquery:

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

regularne JS:

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> 

i wewnątrz somthing.html, na dnie lub zdarzenia onload zrobić coś na wzór

window.parent.window.onContentChange() 

Answer 3

Renderuj dynamicznie element iframe w javasc ript po narysowaniu elementu kontenera ("td1").

<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

Oto rozwiązanie przy użyciu jQuery:

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