7

Possible Duplicate:
Resizing an iframe based on content

I have an iframe where the src is an HTML file and this iframe is put inside usercontrol:

<iframe frameborder="0" src="CName.htm" align="left" width="730" height="1100" ></iframe>

I need the iframe to resize according to the content so that it's height is set according to the hieght of the HTML file and I don't need to use scrolling attribute. Do you have any idea?

Community
  • 1
  • 1
Ahmy
  • 5,038
  • 7
  • 37
  • 50

3 Answers3

19

I've used the following jQuery code to do this:

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

I don't think this will work if the iframe contents are cross-domain, though.

Ferruccio
  • 93,779
  • 37
  • 217
  • 294
  • 1
    To do cross domain you need to use the postMessage API for this, also you need to check for window resize events and DOM mutations, so that the iFrame stays the size of the content. Check out this lib that looks after all these things for you. https://github.com/davidjbradshaw/iframe-resizer – David Bradshaw Feb 14 '14 at 13:40
0

There is a way! Its in jquery and its too simple. Kinda hacky..

$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );

There you go!

Cheers! :)

Shripad Krishna
  • 10,045
  • 4
  • 50
  • 63
0

You can figure out the height and width of the content inside the frame, then call a function that's on the frame's owner to set the iframe element's height and width.

Tom Ritter
  • 94,954
  • 29
  • 130
  • 168
  • 3
    This will only work if the iframe and its parent don't violate the same-origin policy. – nickh May 06 '12 at 03:38