title: Resizing 'iframe' after inside content is loaded
body: <p>I have an iFrame in which I am loading a page which uses ajax to load data after various page labels are clicked. Now I am using Javascript function to calculate loaded-data height for replacing iframe's height which results into resizing iframe and thus avoids scrollbars. Now my problem is script gets called as soon as labels are clicked, but data is still loading. Kindly tell me something I can use to wait till ajax is finished loading data and then calling my function.</p>
  <p>I am using the following script:</p>
  <pre><code>function resizeFrame() {
      var body = document.body,
      html = document.documentElement;
      var iFrame = parent.document.getElementById(&quot;iframe1&quot;);//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 
  }
  </code></pre>
  <p>and my html is as following:</p>
  <pre><code>&lt;iframe src=&quot;&quot; id=&quot;iframe1&quot; name=&quot;iframe1&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; onload=&quot;$(document).ready(function(){resizeFrame();});&quot;  style=&quot;width:960px;height:570px&quot;&gt;
  </code></pre>
   
  <p>The above code works fine for me (iframe/src url both are in same domain.) I also want to get the height of a div element which is in iframe content window page. How do I grab that?</p>