Resize iframe to content with Jquery

Question

I'm trying to resize an iframe dynamicly to fit its content. To do so I have a piece of code:

$("#IframeId").height($("#IframeId").contents().find("html").height());​

It doesnt work. Is it because of cross-domain issue? How do I get it to fit? Please take a look at Fiddle: JsFiddle

ps I have set the html and body of the link height:100%;

Answer 1

Not sure why @Nelson's solution wasn't working in Firefox 26 (Ubuntu), but the following Javascript-jQuery solution seems to work in Chromium and Firefox.

/**
 * Called to resize a given iframe.
 *
 * @param frame The iframe to resize.
 */
function resize( frame ) {
  var b = frame.contentWindow.document.body || frame.contentDocument.body,
      cHeight = $(b).height();

  if( frame.oHeight !== cHeight ) {
    $(frame).height( 0 );
    frame.style.height = 0;

    $(frame).height( cHeight );
    frame.style.height = cHeight + "px";

    frame.oHeight = cHeight;
  }

  // Call again to check whether the content height has changed.
  setTimeout( function() { resize( frame ); }, 250 );
}

/**
 * Resizes all the iframe objects on the current page. This is called when
 * the page is loaded. For some reason using jQuery to trigger on loading
 * the iframe does not work in Firefox 26.
 */
window.onload = function() {
  var frame,
      frames = document.getElementsByTagName( 'iframe' ),
      i = frames.length - 1;

  while( i >= 0 ) {
    frame = frames[i];
    frame.onload = resize( frame );

    i -= 1;
  }
};

This continually resizes all iframes on a given page.

Tested with jQuery 1.10.2.

Using $('iframe').on( 'load', ... would only work intermittently. Note that the size must initially be set to 0 pixels in height if it is to shrink below the default iframe height in some browsers.

Answer 2

As the answer to the question use an already outdated jquery (load has been deprecated and replaced with .on('load',function(){}), below is the latest code for the answer in the question.

Note that I use the scrollHeight and scrollWidth, which I think will load much nicer than using Height and Width like the answer provided. It will totally fit, without scroll anymore.

$("#dreport_frame").on('load',function(){

  var h = $('#dreport_frame').contents().find("body").prop('scrollHeight');
  var w = $('#dreport_frame').contents().find("body").prop('scrollWidth');

  $('#dreport_frame').height(h);
  $('#dreport_frame').width(w);
})

Answer 3

You just need to apply your code on the iframe load event, so the height is already known at that time, code follows:

$("#IframeId").load(function() {
    $(this).height( $(this).contents().find("body").height() );
});

See working demo . This demo works on jsfiddle as I've set the iframe url to a url in the same domain as the jsfiddle result iframe, that is, the fiddle.jshell.net domain.

UPDATE:
@Youss: It seems your page for a strange reason don't get the body height right, so try using the height of the main elements instead, like this:

$(document).ready(function() {
    $("#IframeId").load(function() {
            var h = $(this).contents().find("ul.jq-text").height();
            h += $(this).contents().find("#form1").height();
            $(this).height( h );
        });
});

Answer 4

Adjust height of an iframe, on load and resize, based on its body height.

var iFrameID = document.getElementById('iframe2');
var iframeWin = iFrameID.contentWindow;

var eventList = ["load", "resize"];
for(event of eventList) {
    iframeWin.addEventListener(event, function(){ 
        if(iFrameID) {
            var h = iframeWin.document.body.offsetHeight  + "px";
            if(iFrameID.height == h) {
                return false;
            }

            iFrameID.height = "";
            iFrameID.height = iframeWin.document.body.offsetHeight  + "px";

        }   
    })  
} 

Answer 5

What you can do is the following:

• Within the iFrame use document.parent.setHeight(myheight) to set the height within the iFrame to the parent. Which is allowed since it is a child control. Call a function from the parent.

• Within the parent you make a function setHeight(iframeheight) which resizes the iFrame.

Also see:
How do I implement Cross Domain URL Access from an Iframe using Javascript?

Answer 6

Just do it on the HTML tag, works perfect

$("#iframe").load(function() {
    $(this).height( $(this).contents().find("html").height() );
});