title: Setting dynamic height for <iframe> in Google Chrome and Safari
body: <p>I am developing a web application using Spring MVC framework, in one of my modules I have implemented an <code>&lt;iframe&gt;</code> to display user posts and comments. Now my problem is the <code>&lt;iframe&gt;</code> height should be set dynamically based on the contents in the <code>&lt;iframe&gt;</code>. I am using the following JavaScript for this purpose. It works fine in Firefox and Internet Explorer but not in Google Chrome and Safari. How to solve this problem?</p>
  
  <pre><code>function sizeFrame() {
    jQuery("#myframe", top.document).css({ height: 0 });
                          var iframe=document.getElementById('myframe');
                  var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                  var the_height=0;
                   if (iframeWin.document.body) {
                   the_height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                  }
                 jQuery("#myframe", top.document).css({ height: the_height }); 
                }
  
               &lt;/script&gt;
  </code></pre>