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/

Answer 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/