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

Question

我有一个拥有动态内容的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='<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>

检查一下