如何根據iframe中的動態內容更改iframe的高度？

我有一個擁有動態內容的iframe。如果回答具體問題，則顯示附加信息（隱藏的div變爲可見）。我想要擴展iframe的高度。我知道這個問題在這裏已經被多次詢問過了，但是好像通常在加載iframe中的不同頁面時，而不是在iframe中動態更改內容時。如何根據iframe中的動態內容更改iframe的高度？

下面是一個例子，我嘗試使用的jsfiddle放在一起：

的iframe：http://jsfiddle.net/B4AKc/2/

頁：http://jsfiddle.net/PmBrd/

任何想法？

來源

2011-11-26 Michael

這仍然是一個棘手的問題。以下是關於SO的最佳答案：http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content/362564#362564 –

iframe中的內容與頁面所在的頁面位於同一個域中iframe？ – dSquared

是的，同一個域名。 – Michael

這是否適合您？

http://jsfiddle.net/PmBrd/1/

代碼：

var iframe = document.getElementById("ifr").contentWindow; 

iframe.$(".toggle_div").bind("change", function() { 
    $("#ifr").css({ 
     height: iframe.$("body").outerHeight() 
    }); 
});

既然你提到他們是在同一個領域，它只是一個做你的真正的應用程序類似的問題。

來源

2011-11-26 16:04:34 Esailija

看看jQuery postMessage插件。它允許您將信息從子框架傳遞給父項。您可以更改子框架內的代碼，以便在內容更改時將內容高度發佈到父級，父級隨後可以使用該高度來相應地調整iframe的大小。

兩頁必須在同一個域上才能正常工作。

我希望這有助於！

來源

2011-11-26 16:06:38 dSquared

Esailija的答案很好，但這是更好的伊莫。

$('#ifr').contents($(".toggle_div")).bind("change", function() { 
    $("#ifr").height($("#ifr").contents().find("html").height()); 
});

來源

2013-03-05 10:07:53 olofom

工程就像一個魅力。 –

選中此項。你可以使用javascript本身獲得iframe的大小。
使用setInterval，每次檢查窗口高度。

< iframe src='<YOUR_URL>' frameborder='0' scrolling='no' id='frame_id' style='overflow:hidden; width:984px;' > 
</iframe> 

<script language="javascript" type="text/javascript"> 
setInterval(function(){ 
    document.getElementById("frame_id").style.height = document.getElementById("frmid").contentWindow.document.body.scrollHeight + 'px'; 
},1000) 
</script>

Check this

來源

2013-04-22 12:13:20

可能有點晚了，因爲所有其他的答案是從2011年:-)但是...... here's我的解決方案。測試在實際的FF，Chrome和Safari 5.0

$(document).ready(function(){ 
    $("iframe").load(function() { 
     var c = (this.contentWindow || this.contentDocument); 
     if (c.document) d = c.document; 
     var ih = $(d).outerHeight(); 
     var iw = $(d).outerWidth(); 
     $(this).css({ 
      height: ih, 
      width: iw 
     }); 
    }); 
});

希望這會幫助任何人。

來源

2013-12-25 23:41:52 ddlab

如何根據iframe中的動態內容更改iframe的高度？

回答

相關問題