Ändern der Größe von 'iframe' nachdem der Inhalt geladen ist

Question

Ich habe einen iFrame, in dem ich eine Seite lade, die Ajax verwendet, um Daten zu laden, nachdem verschiedene Seitenlabels angeklickt wurden. Jetzt benutze ich JavaScript-Funktion, um geladene Datenhöhe zu berechnen iframe's height was zur Größenänderung von iframe führt und somit scrollbars vermeidet. Nun ist mein Problem, Skript wird aufgerufen, sobald Labels angeklickt werden. aber Daten werden noch geladen. kindly sag mir etwas was ich benutzen kann um zu warten bis Ajax fertig ist Daten zu laden und dann anzurufen meine Funktion.

Ich bin mit dem folgenden Skript

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 
} 

und My html ist wie folgt ::

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

Der obige Code funktioniert gut für mich (iframe/src url beide sind in der gleichen Domäne.) Ich möchte auch die Höhe eines div-Elements, das in iframe Inhalt Fensterseite ist. Wie nehme ich das?

Answer 1

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

Der Trick hier ist frame.load Verfahren wartet, bis der Rahmen zu laden. Danach wird die Höhe und Breite wie gewünscht manipuliert. Hier setze ich den gesamten Bildschirm ein. Und die Seite enthält nur einen iframe und nichts anderes.

Mit freundlichen Grüßen.

Answer 2

Wenn Sie in der vollen Breite des Fensters nicht daran interessiert sind, können Sie nur bekommen sie den Inhalt

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

frame.load(resizeIframe); 
function resizeIframe() { 
    frame.height(frame.contents().height()); 
    frame.height(frame.contents().height()); 
}