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>

Check this

Answer 3

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

$('#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的大小。

两页必须才能在同一个域上运行。

我希望这有帮助！

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

5 个答案: