使用javascript调整iframe大小

时间:2012-12-12 17:30:55

标签: javascript iframe

我正在尝试使用javascript调整网站上iframe的大小,以便iframe与内部内容一样长。我的代码如下:

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' );

它不起作用,但是使用console.log时,唯一没有出现的日志是在'load'函数内。

我正在调用页面底部的所有javascript,我不确定是否会导致问题。

任何帮助都会有很大帮助。


修改:源代码位于https://github.com/xonorageous/projet-sas 可以在http://daniel-lucas.com/experiments-dir/projet-sas/

查看网站

1 个答案:

答案 0 :(得分:1)

你可以在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';
               });
            }

        });

在此处查看原始来源&gt; http://css-tricks.com/snippets/jquery/fit-iframe-to-content/