Resize iframe height based on the content

[Sivad]

Hello,

Is it possible to resize iframe height based on the content?

[April]

Hi Sivad,

It is possible by pasting this script on your footer:

<script>

var iframes= document.querySelectorAll("iframe"); //get all iframes
       
iframes.forEach(function f1(elem){ //loop into each iframe

elem.addEventListener("load", function f2(){ //check if each iframe has 'loaded'

elem.style.height =elem.contentWindow.document.body.scrollHeight + 'px'; //assign the height

//if you want to add more to the height, you can do
//elem.contentWindow.document.body.scrollHeight + NUMBER + 'px';

});

});

</script>

If you want to do this on only one iframe when you have multiple:

1.) Assign an ID to the iframe, i.e. id="target"
2.)Use the following script

 

<script>

var iframe1 = document.getElementById("target"); //get iframe with id="target"
       
iframe1.addEventListener("load", function tx(){

iframe1.style.height =iframe1.contentWindow.document.body.scrollHeight + 'px';
    
});

</script>

Please note that this code will not work with a SEARCH FORM as it only resizes WHEN the contents of the iframe have been loaded.

 

Hope this helps.

 

[Kurumi]

Hi @Sivad - you can check this forum post as well for the solution: