2012-04-05 15 views
1

iFrameには、さまざまなページラベルをクリックした後にデータを読み込むためにajaxを使用するページがロードされています。javascript関数を使用して、 iframeの高さがiframeのサイズを変更する結果、スクロールバーを避けることができます。今、問題はスクリプトが呼び出されるとすぐに呼び出されます。ラベルはclick.Butデータはまだロードされています。私は、私の機能。内容が読み込まれた後に 'iframe'のサイズを変更する

私は、次のスクリプトを

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要素の高さを取得したいと思います。私はそれをどのように取得しますか?

答えて

1

HTML

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

ジャバスクリプト/ 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だけが含まれています。

親切にしてください。

+0

に合わせて取得することができます。 :) – Ankur

1

あなたは、ウィンドウの幅いっぱいに興味を持っていないなら、あなたはそれは私がこのone.Thanksを試してみましょうコンテンツ

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

frame.load(resizeIframe); 
function resizeIframe() { 
    frame.height(frame.contents().height()); 
    frame.height(frame.contents().height()); 
} 
関連する問題