title: trouble with dynamic async iframe
body: <p>I'm trying to use the <a href="http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance#dynamic" rel="nofollow">Dynamic Async iFrame</a> method, but my code isn't working and I'm confused about what I'm doing wrong.  The iFrame itself is loading, but it isn't showing the expected web page. See <a href="http://awesomescreenshot.com/0cf1p2vab3" rel="nofollow">what I mean</a>.</p>
  
  <p>Here is my code.  What am I doing wrong?</p>
  
  <pre><code>&lt;script&gt;
      (function(d){
          var iframe = d.body.appendChild(d.createElement('iframe')),
              doc = iframe.contentWindow.document;
  
          // style the iframe with some CSS
          iframe.style.cssText = "width:900px;height:600px;";
  
          doc.open().write('&lt;body onload="' + 
              'var d = document;d.getElementsByTagName(\'head\')[0].' + 
              'appendChild(d.createElement(\'script\')).src' + 
              '=\'http://www.uab.edu/dining/locations\'"&gt;');
  
          doc.close(); //iframe onload event happens
  
      })(document);
  &lt;/script&gt;
  </code></pre>
  
  <p>EDIT: Solution Code</p>
  
  <pre><code>&lt;%= javascript_tag do %&gt;
          $(window).load( function(){
              window.map = '&lt;%= j @college.map.html_safe %&gt;';
              window.street_view = '&lt;%= j @college.street_view.html_safe %&gt;';
              window.food = '&lt;%= j @college.food.html_safe %&gt;';
              window.housing = '&lt;%= j @college.housing.html_safe %&gt;';
              window.weather = '&lt;%= j @college.weather.html_safe %&gt;';
              $('#map').html(map);
              $('#street_view').html(street_view);
              $('#food_iframe').html(food);
              $('#housing_iframe').html(housing);
              $('#weather_section').html(weather);
          });
      &lt;% end %&gt;
  </code></pre>