根据动态内容动态调整 iframe 高度答案

【问题标题】：dynamically resize iframe height based on dynamic content根据动态内容动态调整 iframe 高度
【发布时间】：2012-07-29 05:43:46
【问题描述】：

首先，我会给你我的页面结构：

<html>
<body>
    <div>
    <iframe>
        <div id="div1">
        </div>
    </iframe>
    </div>
</body>
</html>

如果我提前知道div1 的大小，这里就没有问题了。但是，我正在使用 jquery ajax 将内容动态添加到 div1 中，因此我无法预先设置 <iframe> 的高度。

我已经通过在<iframe> 的onload 中添加一些脚本来尝试在其他线程中找到的解决方案，但它没有用，因为内容会动态更改而无需重新加载页面。

有什么帮助吗？

【问题讨论】：

既然是改变div1的内容，能不能每次改变后计算div1的高度，然后改变iframe的高度
即使我可以计算出div1的高度，我该如何改变iframe的高度呢？我不能用简单的 jquery 来做，我不想深入研究复杂的 javascript。
更改内容的代码在哪里/是在 iframe 中还是在父级中？
@Huangism 我不知道这是否是您要查找的内容，但更改内容的代码是 ajax 调用。在$.ajax 的成功函数中类似于$('div').html(data)。
那个ajax是在父页面，还是在iframe src页面？

【解决方案1】：

我不确定您为什么要在这里使用 iframe。但也许你可以尝试使用

【讨论】：

【解决方案2】：

在您的子页面中，在动态生成的代码完成加载后，插入以下代码：

// Rsize containing iframe to proper height
parent.parent.resizeIframe($('html').height());

然后，在父页面中，包含这个函数：

function resizeIframe(newHgt)
{
    $('#iframeid').height((parseInt(newHgt)+75)+'px');
}

这将使您到达您需要的位置，但我要解决的问题是如何确定 iframe 内容的大小动态生成的代码已完成加载... “全部来自父页面”。

不管怎样，希望对你有帮助。

...

【讨论】：