[jQuery] Include JS scripts dynamically (before DOM has loaded)

[jQuery] Include JS scripts dynamically (before DOM has loaded)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
Hi folks,
I've been working on a little jQuery powered MVC framework for the past
week and it really has started to produce some nice results. One of the
things I highly depend on is the ability to dynamically include
javascript files, and trigger a callback function when they are loaded.
Those need to load before the DOM does. I call this semi-asynchronous
loading.
Right now I have a function called jsInclude for this that is part of a
jCake 'singleton' class (using  'new function') which works really
beautifully in Firefox. However since about ~4 hours I've been trying
to get it to work under IE and only hit issues. So first please have a
look at the code:
----------------------------------------------------------------------------
<tt>// the variable 'self ' refers to the jCake class/ that this
function is a part of
</tt><tt>this.jsInclude = function(jsInclude, callback, params, scope)
{
    if (!params)
        params = [];
    else if(typeof(params)=='string')
        params = [params];
    for (i=0; i < self.jsIncludes.length; i++)
    {
        if (self.jsIncludes[i]==jsInclude)
        {
            callback.apply(self, params);
            return;
        }
    }
   
    var path = self.jsBaseUrl+jsInclude;
   
    document.write('<script type="text/javascript"
src="'+path+'"></script>');
   
    if (callback)
    {
        self.jsCallbacks.push({scope: scope || self, callback:
callback, params: params});
        document.write('<script type="text/javascript">var
callback = jCake.jsCallbacks['+(self.jsCallbacks.length-1)+'];
callback.callback.apply(callback.scope,
callback.params);</script>');
    }
   
    self.jsIncludes.push(jsInclude);
}</tt>
----------------------------------------------------------------------------
What it does is fairly simple, it dynamically adds a <script> tag
to the document using document.write and then, in case there is a
callback function it adds another script tag that should fire the
callback when the external <script> before it has loaded. This
works in FF, but in IE the callback will be triggered instantly. So I
tried to work around this in several ways: <a
href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/defer.asp">using
the IE defer attribute for the script tag</a>, <a
href="http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited">the
onreadystatechange event</a>  as well as using an additional external
file. But no matter what I've tried, it either resulted in the include
becoming asynchronous (as opposed to semi-asynchronous loading before
the DOM), or into some mess of IE errors that eventually brought up a
white page (probably because document.write was triggered after the DOM
had loaded).
So for me this is the point to ask some of the JS ninjas around here if
they've been playing around with stuff like this before. Again, what I
need is a cross browser (let's say IE/FF) way to dynamically include JS
files before the DOM has loaded and registering an onload callback.
Meanwhile I'll go back to the drawing board and create a stand-alone
demo of the problem that I'll post here later on in case nobody can
work with the code I posted above.
-- Felix Geisendörfer aka the_undefined
<div class="moz-signature"><small>--------------------------
<a href="http://www.thinkingphp.org">http://www.thinkingphp.org</a>
<a href="http://www.fg-webdesign.de">http://www.fg-webdesign.de</a>
</small></div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/