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

这里有一个很好的主题： Resizing an iframe based on content 并且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%;
}

如何动态更改iFrame的高度？

3 个答案: