iframe调整问题

Question

我正在将动态加载到IFrame中。并使用以下代码根据表单大小调整iframe的大小：

使用Javascript：

function iframeLoaded(i) {
    var iFrameID = document.getElementById(i);
    if (iFrameID) {
        iFrameID.height = "";
        iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
    }
}

HTML：

<div class="row ">
    <div class="col-md-12">
        <div>
            <iframe id="CustomFormIframe" onload="iframeLoaded(this.id)" style="width:100%!important;min-height:150px; background-color:white;" frameborder="0" scrolling="no"></iframe>
        </div>
    </div>
</div>

但是对于大型表单，iframe没有正确调整大小。不要显示完整的表格。

Answer 1

这里的https://stackoverflow.com/a/9976309可能会让您轻松完成自己想做的任务。

或

只有更改后才会在每次加载时将高度重置为0，以使某些浏览器降低高度。

将此添加到标记：

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

<iframe onload='resizeIframe(this)'></iframe>

或

<iframe id="form-iframe" src="iframe1form.html" style="margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>

在iframe下方插入JavaScript。

将此JavaScript放在iframe下方的某个位置。它可能在页面末尾向下和/或从外部文件导入。

<script type="text/javascript">
function AdjustIframeHeightOnLoad() { document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>