iframe動態高度調整大小

Question

嗨我目前有2頁（index.html和iframe_contents.html）。 兩者都在同一個域上。

我目前正在嘗試根據內容大小動態調整iframe。

我正在使用它來幫助我http://benalman.com/code/projects/jquery-resize/examples/resize/如果iframe_contents body標記在Firefox和IE 7/8/9上變得更大或更小，它可以工作webkit它只能成長，永遠不會縮小

我將iframe_contents.html中的body標簽縮小到內容高度更改時不縮小但僅在iframe中縮小。 當iframe_contents.html不在iframe中時，如果縮小/放大元素，則整體高度會發生變化。

這是一個特定於webkit的問題嗎？

Answer 1

在這里閱讀了大量答案后，他們都有同樣的問題，在需要時不調整小尺寸。 我認為大多數人只是在幀加載后進行一次性的大小調整，所以也許不在乎。 我需要在窗口大小改變時再次調整大小。 所以對我來說，如果他們讓窗戶縮小，那么iframe會變得非常高，那么當他們使窗戶變大時，它會再次變短。 在某些瀏覽器上沒有發生這種情況，因為我在使用DOM檢查器（FireBug / Chrome開發工具）時可以找到的scrollHeight，clientHeight，jquery height（）和任何其他高度都沒有報告iframe后身體或html高度更短做得更廣。 像身體有最小高度100％設置或東西。

對我來說，解決方案是使iframe 0高度，然后檢查scrollHeight，然后設置為該值。 為了避免我頁面上的滾動條跳轉，我將父級（包含iframe）的高度設置為iframe高度，以便在執行此操作時保持總頁面大小不變。

我希望我有一個更清潔的樣本，但這是我的代碼：

        $(element).parent().height($(element).height());
        $(element).height(0);
        $(element).height($(element).contents().height());
        $(element).parent().height("");

元素是我的iframe。

iframe具有寬度：100％樣式集，並且位於具有默認樣式（塊）的div內。

代碼是jquery，並將div高度設置為iframe高度，然后將iframe設置為0高度，然后將iframe設置為內容高度。 如果我刪除將iframe設置為0高度的行，iframe將在需要時變大，但從不變小。

Answer 2

這可能對您沒什么幫助，但這是我們在iframe_contents.html頁面中的功能。 它將嘗試以一種自調整大小，跨瀏覽器，純JavaScript的方式調整加載它的iframe的大小：

function makeMeFit() {
    if (top.location == document.location) return; // if we're not in an iframe then don't do anything
    if (!window.opera && !document.mimeType && document.all && document.getElementById) {
        parent.document.getElementById('youriframeid').style.height = (this.document.body.offsetHeight + 30) + "px";
    } else if (document.getElementById) {
        parent.document.getElementById('youriframeid').style.height = (this.document.body.scrollHeight + 30) + "px"
    }
}

您可以在resize()事件中或在更改頁面高度的事件之后調用它。 該方法中的功能測試應該分離出WebKit瀏覽器並選擇正確的height屬性。