Resize iframe with javascript

Question

I'm trying to adapt the size of iframes on a site using javascript so that the iframes are as long as the content inside. My code is the following:

var iFrames = $('iframe');

function iResize() {        
    for (var i = 0, j = iFrames.length; i < j; i++) {
        iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
    }
}

console.log( 'resize frame before' );
if ($.browser.safari || $.browser.opera) {
    console.log( 'if' );            
    iFrames.load(function(){
        setTimeout(iResize, 0);
    });

    for (var i = 0, j = iFrames.length; i < j; i++) {
        var iSource = iFrames[i].src;
        iFrames[i].src = '';
        iFrames[i].src = iSource;
    }               
} else {
    console.log( 'else' );
    $( '.iframe' ).load(function() { 
        console.log( 'load' );
        this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
    });
}
console.log( 'resize frame end' );

It's not working but with the console.log the only log not appearing is inside the 'load' function.

I'm calling all the javascript at the bottom of the page, I'm not sure if that's causing the problem or not.

Any help would be much appreaciated.

Edit: source code is at https://github.com/xonorageous/projet-sas Site can be viewed at http://daniel-lucas.com/experiments-dir/projet-sas/

Is the iframe's source on the same domain? Don't forget about the Same-Domain Policy. — BenM
– BenM, Commented Dec 12, 2012 at 17:33
yes, the code for my iframe is <iframe src="sas/html/aston_martin_avg_year.htm" class="iframe" width="800"></iframe> — xonorageous
– xonorageous, Commented Dec 12, 2012 at 17:44

BenM · Accepted Answer · 2012-12-12 17:45:54Z

1

You can achieve this a lot easier in jQuery:

$(function(){

        var iFrames = $('iframe');

        function iResize() {

            for (var i = 0, j = iFrames.length; i < j; i++) {
              iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
            }

            if ($.browser.safari || $.browser.opera) { 

               iFrames.load(function(){
                   setTimeout(iResize, 0);
               });

               for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
               }

            } else {
               iFrames.load(function() { 
                   this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
               });
            }

        });

See here for original source > http://css-tricks.com/snippets/jquery/fit-iframe-to-content/

answered Dec 12, 2012 at 17:45

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

xonorageous Over a year ago

Thank you BenM, this is the code I started with originally, in the code above I've just added some console.log

xonorageous Over a year ago

Thank you BenM, this is the code I started with originally, in the code above I've just added some console.log. For some reason the code just stops working when it enters iFrames.load

BenM Over a year ago

Which browser are you testing? You don't have a console.log statement inside Safari or Opera check...

xonorageous Over a year ago

I'm using chrome, I've already tried doing the log in the other check to see if it worked elsewhere

xonorageous Over a year ago

Thank you for your time and help BenM. It's working now, I suppose that it's the cache on my computer that was stopping the latest changes from showing.

|

Collectives™ on Stack Overflow

Resize iframe with javascript

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related