how to resize iframe height auto after page loaded insideit

Question

User-1634604574 posted

i have this iframe inside div i want to make height that iframe auto after page loaded inside it 

<div>
<iframe  onload='autoResize(this)' class='IDNAME' style='height:100%;width:100%;border:none;display: block;;overflow: hidden;'  scrolling='no' src='/temp/c.html' type='text/html' ></iframe> 

</div>

that code is not working fine 

Answer 1

User-474980206 posted

assuming the content follows the same-origin policy. autosize is:

function autoResize(iFrame) {
    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}  

Answer 2

User-1634604574 posted

if i want to resize height of that div after iframe is loaded how can i do it 

note: that iframe return result with ajax

Answer 3

User288213138 posted

Hi zhyanadil,

if i want to resize height of that div after iframe is loaded how can i do it 

You can try below code. you can resize the iframe by height and width.

<script>    
        function autoResize() {
            var iframe = document.getElementById("myFrame");
            iframe.style.height = "1000px";
            iframe.style.width = "400px";               
        }
    </script>

<div>
        <iframe onload='autoResize()' id="myFrame" class='IDNAME' style='height:100%;width:100%;border:none;display: block;;overflow: hidden;' scrolling='no' src='/temp/c.html' type='text/html'></iframe>
    </div>

If you want to adjust iFrame Height automatically according to its contents using JavaScript, you can refer to this link: https://www.tutorialrepublic.com/faq/automatically-adjust-iframe-height-according-to-its-contents-using-javascript.php

Best regards,

Sam