How to set iframe height to match content?

Question

I am trying to remove a scrollbar from an iframe. When I set the Iframe height manually, it works, but the iframe size can change, and I don't know how to get the iframe height when loading the page.

Is there a way to remove the scrollbar and place the contents of the iframe?

<div class="portlet" id="pageContainer"> <iframe id="frame" width="100%" frameborder="0" height="2000" scrolling="false" allowfullscreen="" src="/app/mytestapp" style="overflow: hidden"></iframe> </div> 

When I try to execute the function below, it does not return the correct height. (It returns 2000px, but my iframe height is about 3000px)

 $('iframe').load(function() { this.contentWindow.document.body.offsetHeight + 'px'; }); 

Answer 1

you can use

 $('iframe').load(function() { $('#frame').height($('#frame').get(0).contentWindow.document.body.offsetHeight + 'px'); }) 

or

 $('iframe').load(function() { setTimeout(function(){ $('#frame').height($('#frame').get(0).contentWindow.document.body.offsetHeight + 'px'); }, 3000); }) 

Answer 2

Use these options to remove the frame and scroll bar.

 scrolling="no" frameborder="no" 

And this code to set the iframe height

 var width = $(window).width() var height = $(window).height() $('#frame').css({ width : width, height : height }) 

If you need to dynamically change the height to fit the window, wrap the code above in a function and use it in the resize event in window , also make a call in the ready document, for example:

 function iframeResize(){ var width = $(window).width() var height = $(window).height() $('#frame').css({ width : width, height : height }) } $(window).on('resize', iframeResize) $(document).on('ready', iframeResize) 

---

UPDATED

You also need to carry margins and paddings on the parent iframe page. The default values ​​cause the scrollbars of the parent page. Something like this would be an easy solution if you don't need to carry any other element on the page except an iframe.

 * { margin: 0; padding: 0; }