根据动态内容动态调整 iframe 高度
Posted
技术标签:
【中文标题】根据动态内容动态调整 iframe 高度【英文标题】：dynamically resize iframe height based on dynamic content 【发布时间】：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。但也许你可以尝试使用
http://sonspring.com/journal/jquery-iframe-sizing
【讨论】：
我实际上已经使用过该脚本，但它并没有解决我的问题。我现在正在重新设计我的应用程序以摆脱iframe。它浪费了我很多时间来修复很多东西。感谢您的所有回复。【参考方案2】：
在您的子页面中，在动态生成的代码完成加载后，插入以下代码：
// Rsize containing iframe to proper height
parent.parent.resizeIframe($('html').height());
然后，在父页面中，包含这个函数：
function resizeIframe(newHgt)
$('#iframeid').height((parseInt(newHgt)+75)+'px');
这将使您到达您需要的位置，但我要解决的问题是如何确定 iframe 内容的大小 动态生成的代码已完成加载... “全部来自父页面”。
不管怎样，希望对你有帮助。
...
【讨论】：
你应该为你的问题打开一个问题。 应该提到，当同源策略生效时，这不起作用。以上是关于根据动态内容动态调整 iframe 高度的主要内容，如果未能解决你的问题，请参考以下文章
根据内部更改的内容动态调整 jQuery Fancybox 的 iframe 高度