如何根据iframe中的动态conent更改iframe的高度？

我有一个拥有动态内容的iframe。 如果答案具体问题，则显示其他信息（隐藏的div变为可见）。 我希望iframe的高度能够扩展。 我知道这里已经多次询问过这个问题，但似乎通常在加载iframe中的不同页面时，而不是在iframe中动态更改内容时。

这是我尝试使用jsFiddle放在一起的一个例子：

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

页面： http ： //jsfiddle.net/PmBrd/

有任何想法吗？

Answer 1

这对你有用吗？

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

码：

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

既然你提到它们属于同一个域，那只需要用你的真实应用做类似的事情。

Answer 2

检查一下。 您可以使用javascript本身获取iframe大小。
使用setInterval，每次都检查窗口高度。

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

检查一下

Answer 3

Esailija的答案很好，但这是更好的imo。

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

Answer 4

可能有点晚了，因为所有其他答案都来自2011 :-)但是……这是我的解决方案。 在实际的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 }); }); }); 

希望这会对任何人有所帮助。

Answer 5

看一下jQuery postMessage插件。 它允许您将信息从子框架传递到父框架。 您可以更改子框架内的代码，以便在内容更改时将内容高度发布到父级，然后父级可以使用它来相应地调整iframe的大小。

这两个页面必须位于同一个域中才能工作。

我希望这有帮助！