title: How to dynamically resize an iFrame (crossbrowser solution)
body: <p>I am trying to include an <code>iframe</code> on a Drupal page. So far I successfully included the frame but the height resize function that I wrote only works in Internet Explorer. My goal is to make resize work inFirefox and Chrome as well. I searched the Internet but I couldn't find what I was looking for. Long story short, I want my frame to automatically resize height itself.</p>
  <p>This is what I did so far (this is the code of the HTML page included in Drupal):</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      function resize() {
          var iframe = document.all.icw;
          document.getElementById(&quot;icw&quot;).style.height = iframe.document.body.scrollHeight + &quot;px&quot;;
      }
  &lt;/script&gt;
  &lt;iframe id=&quot;icw&quot; src=&quot;XXXXX&quot; width=&quot;100%&quot; scrolling=&quot;no&quot; onload=&quot;resize()&quot;&gt;
  </code></pre>
  <p>I understand that if the <code>iframe</code> lives on another domain the solution may be more difficult due to permissions. Is that correct?</p>
  <p>These are the errors I get in Chrome and Firefox:</p>
  <blockquote>
  <p>Chrome: Cannot read property 'body' of undefined</p>
  <p>Chrome: JavaScript attempt to access frame with URL XXX from frame with URL YYY. Domains, protocols and ports must match.</p>
  <p>Firefox: document.all is undefined</p>
  </blockquote>
  <p><strong>EDIT:</strong> What if I want to change one of the <code>iframe</code> element? In my case I need to change a textbox value. I understand I must do that when the page is loaded but I can't find a solution. No matter where I put the code I always a get a</p>
  <blockquote>
  <p>Cannot call method 'getElementById' of undefined</p>
  </blockquote>
  <p>when I try to access the iFrame textbox.</p>
  <p><strong>EDIT2:</strong> Asked a new question since they weren't related.</p>