title: Dynamic Asynch Iframe technique
body: <p><strong>Situation:</strong> I need to create an iframe within a page in a dynamic asynchronous way as described in <a href="http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance" rel="nofollow noreferrer">Iframe loading techniques and performance</a> blog post by aaron peters, I read the blog post many times and even watched the original presentation given at velocity conf where this technique was first introduced by Meebo's engineers (as mentioned in the blog post).. </p>
  
  <p>I'm not a JS expert, but the code seems straight forward to me. I don't think his demo page works properly either (Iframe appears blank)! and the technique isn't that popular online, I hope the answer to this question will act as a reference where people can just copy paste the code with minimal modifications to create iframes with all the goodness the technique has to offer.</p>
  
  <p>Briefly explained: </p>
  
  <ul>
  <li><p>The technique prevents the Iframe from blocking
  the page on-load while waiting for the Iframe <em>and</em> the rest of the DOM to fully load first.</p></li>
  <li><p>It prevents the browser's busy indicator from working for
  however long it takes everything to load, thus better user experience.</p></li>
  <li><p>Using this technique, the Iframe starts loading its content <strong>before</strong> the on-load of the main page fires (Iframe starts to load early = shows up early = better speed performance), so please don't suggest answers of ways to modify an iframe's src or append an iframe element to the DOM when on-load fires like suggested here: <a href="https://stackoverflow.com/questions/2114239/is-there-a-way-to-load-an-iframe-asynchronously">is there a way to load an iframe asynchronously</a>   </p></li>
  </ul>
  
  <p><strong>Here's my code:</strong> (pretty much the same as shown in the blog post).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
    &lt;/head&gt;
  &lt;body&gt;
  
    &lt;script&gt;
    (function(d){
      var iframe = d.body.appendChild(d.createElement('iframe')),
      doc = iframe.contentWindow.document;
  
      iframe.style.cssText = "width:500px;height:500px;"; // simple CSS
  
      doc.open().write('&lt;body onload="' + 
      'var d = document;d.getElementsByTagName(\'head\')[0].' + 
      'appendChild(d.createElement(\'script\')).src' + 
      '=\'http:\/\/google.com\'"&gt;');
  
      doc.close(); //iframe onload event happens
  
      })(document);
  
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There must be something I'm missing, your replies are appreciated.</p>
  
  <h2>The Solution for displaying Dynamic Asynch Iframe, to display pages not scripts:</h2>
  
  <p><a href="http://jsfiddle.net/LMB7h/" rel="nofollow noreferrer">http://jsfiddle.net/LMB7h/</a> Hope it helps someone,
  Don't forget to swap nytimes.com with your own url.</p>