Clever Geek Handbook

Resizing iFrames based on the height of its content just to enlarge?

Take a look at the attached code to see what I mean. Try to reduce the width of your browser, the frame should resize correctly. Then enlarge the browser window and notice that the frame does not adjust its height.

I have multiple frames stacked on top of each other, so this is a rather annoying problem.

I've tried using .height (),. OuterHeight (),. InnerHeight (),. ScrollHeight and .clientHeight to no avail.

https://codepen.io/anon/pen/gxaLPW

var newHeight = $('#frame').contents().height();  
$('#frame').attr('height', newHeight);

Thanks in advance for any / all help!

+3


source to share


2 answers


try it



function resizeFrame() {
  var newHeight = $('#frame').contents().find("body").height();
  $('#frame').attr('height', newHeight + 20);
}
+1


source


try this

<script type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function() {
    $(function($){
      var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
      setInterval(function(){
        curHeight = $frame.contents().find('body').height();
        if ( curHeight != lastHeight ) {
          $frame.css('height', (lastHeight = curHeight) + 'px' );
          $frame.css('border-width', 0 + 'px' );
        }
      },0);
    });
});


0


source






More articles:


All Articles