Youss Youss - 1 year ago 168
Javascript Question

Resize iframe to content with Jquery

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


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

Answer Source

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 domain.

@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 );
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download