2

さまざまなページラベルがクリックされた後、ajaxを使用してデータをロードするページをロードしているiFrameがあります。現在、Javascript関数を使用して、iframeの高さを置き換えるために読み込まれたデータの高さを計算しています。これにより、iframeのサイズが変更され、スクロールバーが回避されます。今私の問題は、ラベルがクリックされるとすぐにスクリプトが呼び出されることですが、データはまだロードされています。ajaxがデータのロードを完了してから関数を呼び出すまで待つために使用できるものを教えてください。

次のスクリプトを使用しています。

function resizeFrame() {
    var body = document.body,
    html = document.documentElement;
    var iFrame = parent.document.getElementById("iframe1");//get id of iframe from parent
    var nHeight=0;
    var iframeWin = iFrame.contentWindow.document.body ;
    nHeight = iframeWin.scrollHeight;
    iFrame.style.height = nHeight+'px'; //set the frame height to correspond to the content 
}

私のHTMLは次のとおりです。

<iframe src="" id="iframe1" name="iframe1" scrolling="no" frameborder="0" onload="$(document).ready(function(){resizeFrame();});"  style="width:960px;height:570px">

上記のコードは私にとってはうまく機能します（iframe / src urlは両方とも同じドメインにあります）。また、iframeコンテンツウィンドウページにあるdiv要素の高さを取得したいと思います。どうすればそれをつかむことができますか？

4

2 に答える 2

3

html

<iframe id="containter-frame" 
        src="<url of the page>"
        frameborder="0"
        min-height="600px"
        width="100%">
</iframe>

javascript / jquery：

$(document).ready(function(){

    var frame = $('iframe#containter-frame');

    //hide document default scroll-bar
    document.body.style.overflow = 'hidden';


    frame.load(resizeIframe);   //wait for the frame to load
    $(window).resize(resizeIframe); 

    function resizeIframe() {
        var w, h;       

        //detect browser dimensions
            if($.browser.mozilla){
            h = $(window).height();
            w = $(window).width();                  
        }else{
            h = $(document).height();
            w = $(document).width();
        }

        //set new dimensions for the iframe
            frame.height(h);
        frame.width(w);
    }
});

ここでの秘訣はframe.load、メソッドがフレームのロードを待機することです。その後、必要に応じて高さと幅を操作します。ここで設定しているのは、画面全体をカバーすることです。また、ページにはiframeのみが含まれ、他には何も含まれていません。

敬具。

于 2012-04-05T12:14:55.643 に答える
1

ウィンドウの全幅に興味がない場合は、コンテンツに合わせてウィンドウを表示することができます

var frame = $('iframe#modal-body');

frame.load(resizeIframe);
function resizeIframe() {
    frame.height(frame.contents().height());
    frame.height(frame.contents().height());
}
于 2013-04-27T03:47:59.843 に答える