Iframe Resizing Issue

Question

I am loading a dynamic into the IFrame. and also resizing the iframe according to form size using following code:

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>

But for large form, iframe doesn't resized properly. don't show full form.

Issue Related Iframe

When is the `iframeLoaded` function called? It seems like you resize the `iframe` before it is fully loaded. — Nicolas Cami, May 24 '18 at 08:54
Can you try using jQuery: `$(i).height($(i).contents().height());` — Nicolas Cami, May 24 '18 at 08:59
Can you add the complete code in your answer? (involved HTML and javascript) — Nicolas Cami, May 24 '18 at 09:27
What browser are you using? This event `onload="iframeLoaded(this.id)"` will not work on all browsers... — bastos.sergio, May 24 '18 at 10:01

emran · Answer 1 · 2018-05-24T10:54:18.507

here is the https://stackoverflow.com/a/9976309 that may be ease your task that you want to do.

OR

Only change made is resetting height to 0 on every load in order to enable some browsers to decrease height.

Add this to tag:

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

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

OR

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

Insert JavaScript below the iframe.

Put this JavaScript somewhere below the iframe. It may be down at the end of the page and/or imported from an external file.

<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>

Iframe Resizing Issue

1 Answers1