如何動態更改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%;
}