title: Problems with dynamically loading external js files on a onload event
body: <p>I'm trying to get lightbox2 working with my site,
  <a href="http://www.therussianfrostfarmers.com/" rel="nofollow noreferrer">http://www.therussianfrostfarmers.com/</a>
  , however i seem to be having a problem with conflicting external js files. I'm not entirely sure i know where the problem is with this code, but i believe its got todo with how the onload events are called. the blog content on the homepage is loaded into iframe, the iframe is dynamically resized to fit the content using the onload event, but when i import the files required for lightbox2 (as per normal)....</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/prototype.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/lightbox.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>....it cancels my updateSize() being called on the iframe. lightbox2 does still work. </p>
  
  <p>I've narrowed the problematic js file to the prototype.js. </p>
  
  <p>I've tried handling the sequence of events with the function dhtmlLoadScript(). 
  Using the following code, the page loads properly, the iframe resizes properly, but then the page turns white and firefox loading icon just keeps spinning.</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  // function to resize iframe
  function updateSize() 
  { 
      // get width
      frame_x = $('#content').width() -5; 
  
      // apply width 
      $('#iframed').css('width', frame_x); 
  
  
      //get height
      var the_height = document.getElementById('iframed').contentWindow.document.body.scrollHeight +120;
  
      //apply height
      document.getElementById('iframed').height = the_height;
  
  }
  
  // function to load external js files 
  function dhtmlLoadScript(url)
  {
     var e = document.createElement("script");
     e.src = url;
     e.type="text/javascript";
     document.getElementsByTagName("head")[0].appendChild(e);
  }
  
  // function to handle each event on onload callback 
  function callbackHandler()
  {
     updateSize();
     dhtmlLoadScript("http://www.therussianfrostfarmers.com/ndxz-studio/site/js/prototype.js");
     dhtmlLoadScript("http://www.therussianfrostfarmers.com/ndxz-studio/site/js/scriptaculous.js?load=effects,builder");
     dhtmlLoadScript("http://www.therussianfrostfarmers.com/ndxz-studio/site/js/lightbox.js"); 
  } 
  
  &lt;/script&gt;
  
  &lt;iframe src='$url' frameborder='0' id='iframed' onload="callbackHandler()"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Sorry if anything is unclear.</p>
  
  <p>Thanks
  Cam</p>