如何动态更改iFrame的高度？

Question

如何动态更改包含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';
}

Answer 1

这里有一个很好的线程： 根据内容调整iframe的大小，然后iframe在此处调整lib的大小https://github.com/davidjbradshaw/iframe-resizer （我尚未检查该插件，但希望它能对您有所帮助）

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

Answer 2

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

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

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

然后，您还可以使用@media调整以适应移动设备

Answer 3

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%;
}