如何动态更改 iFrame 的高度？答案

【问题标题】：How can I dynamically change the height of an iFrame?如何动态更改 iFrame 的高度？
【发布时间】：2014-06-02 06:50:06
【问题描述】：

如何动态更改包含 Pardot 表单的 iFrame 的高度？我有一个 Pardot 表单，它通过 iFrame 放置在我网站的页面上。我尝试了多种方法来根据表单的大小动态调整 iFrame 的大小。当用户提交表单时，会存储大部分数据，并且下次查看页面时表单会变短。 iFrame代码如下：

<iframe 
    src="http://go.pardot.com/..." 
    width="100%" 
    type="text/html" 
    frameborder="0" 
    allowTransparency="true" 
    style="border: 0" scrolling="no" 
    id="iframe" 
    onload="javascript:resizeIframe(this);">

</iframe>

javascript如下：

function resizeIframe(obj) 
{
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

【问题讨论】：

看起来您在iframe 上加载了第三方页面。如果是这样，你can't accessiframe 中的文档。如果不是第三方内容，只需从iframe 标签中删除height 属性即可。 Java 在哪里？
大多数浏览器不允许 javascript 访问来自不同域的 iframe 的内容。但是，使用 onreadystatechange 比使用 onload 的运气要好得多。
@Dave “大多数浏览器”是什么意思？他们中的任何一个都不会。如果他们愿意，那将是一个巨大的安全风险。
我力求简洁。
Java 和 Javascript 几乎没有共同之处。您的代码是 Javascript，而不是 Java。

标签： javascript jquery iframe dynamic height

【解决方案1】：

HTML：

<div class="ebookContainer">
<iframe class="ebookFrame" src="http://iFrameURL.com" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
</div>

CSS：

.ebookContainer {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.ebookFrame {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

【讨论】：

【解决方案2】：

这里有一个很好的主题： Resizing an iframe based on content 和 iframe 在这里调整 lib https://github.com/davidjbradshaw/iframe-resizer （我还没有检查那个插件，但希望它可以帮助你）

以上文章包含许多有用的链接。

【讨论】：

【解决方案3】：

尝试使用 CSS 分配一个名为 mine frame-pardot 的类，并且不要设置高度。

.frame-pardot {
    min-height:200px;
    max-height:800px;
    width:100%;
}

<iframe src="????????????" class="frame-pardot" scrolling="no">

然后您还可以使用@media 为移动设备进行调整

【讨论】：