如何動態調整頁面高度為其內容？

Question

我正在使用iFrame的網站上工作。 iFrame本身沒有滾動條。

在該iFrame中，有些元素會在您單擊時滑動打開。 因此，問題在於，如果您滑動一個大於iFrame高度的開口，則會卡在那兒，因為無法滾動。

因此，我希望iFrame的高度與其內容的高度同步。

這是jQuery代碼，用於打開一個元素，然后也適合其內容：

$( "#effect1" ).animate({
    height: $( "#effect2" ).prop( "scrollHeight" )
}, 1000 );
$( "#effect2" ).animate({
    height: $( "#effect2" ).prop( "scrollHeight" ) - parseInt( $( "#effect2" ).css( "padding-top" ), 10 ) - parseInt( $( "#effect2" ).css( "padding-bottom" ), 10 )
}, 1000 );

因此，我認為在此之后添加iFrame高度的更改會很好。

到目前為止，我已經嘗試過：

我從這個網站上獲取了一些處理相同問題的代碼。

function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

因此，在滑動一個iFrame元素之后，我調用setIframeHeight("iframe"); 。 但是有兩個問題：

• 感覺有點發癢，因為高度從一個瞬間切換到另一個瞬間
• 而不是增加iFrame的高度，而是增加文檔的高度

那么，如何動態調整iFrame的高度？

Answer 1

我嘗試了很多選擇。 但是沒有選擇是最好的。 您可以這樣嘗試：

• 在iframe中，為每個間隔時間創建一個間隔函數（setInterval），以檢查文檔/元素高度的變化。 如果更改，請調用父窗口並傳遞新的高度值，它將適合iframe窗口的高度。