动态调整动态 iframe 的大小答案

【问题标题】：Dynamically resize dynamic iframe动态调整动态 iframe 的大小
【发布时间】：2014-03-04 13:11:54
【问题描述】：

several answers 存在动态调整 iframe 大小的问题，该 iframe 本身不会在加载后改变大小。但是，我有一个 iframe，它加载一个根据用户输入（即 jQuery 验证、PHP 验证、基于输入打开的 div 等向页面添加高度）更改大小（特别是其高度）的表单。

有没有办法根据 iframe 的大小变化来改变 iframe 的大小？向 iframe 添加滚动看起来很乱。

【问题讨论】：

你试过 CSS 的 min-height 属性了吗？
是的，这可能是一种选择。问题是不同浏览器和分辨率的高度可能不同，所以我更喜欢动态设置的东西。
如果有非 JS 的解决方案来解决这个问题，这也将是“不错”（但可能是不现实的）。

标签： javascript html css iframe

【解决方案1】：

如果在用户输入值后刷新页面怎么办？

【讨论】：

【解决方案2】：

您可以设置一个间隔，每 200 毫秒检查一次框架“.contentDocument”属性内的主体大小是多少 d 调整框架的大小。

看起来像这样：

var targetFrame = document.getElementById("InnerFrame");
var targetDocument = (targetFrame.contentWindow.document || targetFrame.contentDocument);

window.frameInterval = window.setInterval(function(){
    targetFrame.height = targetDocument.body.height;
},200);

我没有对此进行测试，因为 jsfiddle 不允许带有 url 的 iframe。但它可以让你开始。

【讨论】：

我已经尝试过了，它只将一小部分加载到 iframe 中。
这可能意味着 JavaScript 无法正常运行。我还没有测试过这段代码，但它可以让你开始。晚饭后我看看能为你做些什么。
感谢您的帮助。我在控制台中没有看到任何 JS 错误。