Problems with dynamically loading external js files on a onload event

Question

I'm trying to get lightbox2 working with my site, http://www.therussianfrostfarmers.com/ , 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)....

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

....it cancels my updateSize() being called on the iframe. lightbox2 does still work.

I've narrowed the problematic js file to the prototype.js.

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.

<script type='text/javascript'>
// 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"); 
} 

</script>

<iframe src='$url' frameborder='0' id='iframed' onload="callbackHandler()"></iframe>

Sorry if anything is unclear.

Thanks Cam

Answer 1

something quick to check, see if the function name updateSize() is not getting remapped in prototype