title: Resize dynamic iframe (problem with Chrome)
body: <p>So I've been looking around at all the other Stack Overflow posts and around google about how to set the height/width automatically on an iFrame. I've gone through about 15-20 of them and none have worked for me so far. Let me try to explain my situation:</p>
  
  <p>I'm dynamically setting the body of an iFrame on my page. I'm needing the iFrame to automatically set its height and width accordingly so all text is visible.</p>
  
  <p><b>I'm needing this to work in IE (7 &amp; 8), FireFox 3, and Chrome.</b></p>
  
  <p>Here are the other problems that creap into the issue:</p>
  
  <ol>
  <li>I'm writing in ASP.Net with a master page (so the body element is out of the question).</li>
  <li>I'm needing to set the text of the iFrame on each postback from the server.</li>
  <li>I'm needing the iFrame to resize when the browser resizes.</li>
  <li>All I have access to is javascript, nothing else.</li>
  </ol>
  
  <p>I am writing everything on the same domain, so thats not a problem. </p>
  
  <p>I feel like what I currently have is just a rig and will fall apart at any moment. It displays correct in IE but has a huge bottom margin in FireFox and doesn't display at all in Chrome (doc is always null).</p>
  
  <p>Here it is (I tried to be as detailed as possible, let me know if I need to explain more):</p>
  
  <pre><code>   &lt;script type="text/javascript"&gt;
          function WriteIFrame()
          {
              // get the text i need to put in the iFrame (this is set from the server)
              var iFrameContent = document.getElementById("&lt;%= hiddenIFrameContent.ClientID %&gt;").value;
              var iFrameContainer = document.getElementById("divIFrameContainer");
  
              // create the new iFrame object
              var iFrame = document.createElement("iframe");
              iFrame.setAttribute("id", "myIFrame");
              iFrame.setAttribute("scrolling", "no");
              iFrame.setAttribute("frameborder", "0");
  
              // add the new iFrame object to the container div
              iFrameContainer.appendChild(iFrame);
  
              // find the correct inner document of the iFrame
              var doc = iFrame.document;
              if (doc == null &amp;&amp; iFrame.contentDocument)
                  doc = iFrame.contentDocument;
              //
  
              // write the information into the iFrame
              if (doc != null)
              {
                  doc.open();
                  doc.writeln(iFrameContent);
                  doc.close();
              }
  
              // set the proper height
              var height = doc.body.scrollHeight + iFrameContainer.offsetTop;
              iFrame.setAttribute("style", "width: 100%; height: " + height + "px;");
          }
  
      &lt;/script&gt;
  
      &lt;div id="divIFrameContainer" oninit="WriteIFrame();"&gt;
      &lt;/div&gt;
  
      &lt;iframe id="HelperIFrame" style="display: none;" onload="WriteIFrame();"&gt;&lt;/iframe&gt;
       &lt;textarea id="hiddenIFrameContent" runat="server" style="display: none;" /&gt;
  </code></pre>