As you develop web applications that make use of Ajax to dynamically load content on a web page, you might find that you also need to dynamically load a JavaScript file. The remainder of this blog post describes a function to achieve exactly this.

This function relies on the Prototype JavaScript framework, which hopefully you are using already. For more information about how to use Prototype, you should read the article series Eight Weeks of Prototype.

In order to load a JavaScript file you need to insert a new script element into the Document Object Model (DOM). While in theory this sounds relatively straightforward, you need to ensure the code has finished loading before you can make use of it.

This is achieved by observing the onload event on the <script> element. Unfortunately, doing so will work on all browsers except for Internet Explorer, which instead requires that you monitor the onreadystatechange event.

The following function allows you to easily load JavaScript files in real time.

<script type="text/javascript">
    function loadJs(path, onload)
    {
        var script = new Element('script', {
            src  : path,
            type : 'text/javascript'
        });
 
        if (onload) {
            if (Prototype.Browser.IE) {
                Event.observe(script, 'readystatechange', function(e) {
                    if (this.readyState == 'loading')
                        return;
 
                    onload();
                }.bind(script));
            }
            else
                Event.observe(script, 'load', onload.bind(script));
        }
 
        $$('head')[0].insert(script);
    }
</script>

The following code shows an example of loading a file called scripts.js, in which a function called myFunction() is defined. This function is not available until the scripts.js file is loaded.

The script DOM element is passed as the first and only argument to the callback function.

<script type="text/javascript">
    loadJs('/path/to/scripts.js', function(script) {
        myFunction();
    });
</script>

Alternatively, you could define the callback function separately, as in the following:

<script type="text/javascript">
    function onScriptLoaded()
    {
        myFunction();
    }
 
    loadJs('/path/to/scripts.js', onScriptLoaded);
</script>

This function begins by creating the new DOM element (without yet adding it to the DOM). These four lines would be the equivalent to the HTML <script type="text/javascript" src="/path/to/file.js"></script>

Next we check whether or not a callback function has been defined (since it is optional). If the function is defined, we then check whether or not the browser is Internet Explorer.

If the browser is Internet Explorer, we observe the onreadystatechange event. This event is triggered when the file starts to load and when it has completed loading. Obviously we are only interested in when it has completed, so we check the readyState property.

For all other browsers we simply observe the onload event, which is fired only when the file has completed loading (as well as if the file is already in the browser cache).

In both cases, the Prototype bind() method is called in order to bind the script element to the callback. This means that when you refer to this in the callback, it refers to the script element.

Finally, the element is inserted into the DOM. This is done by inserting it into the head of the HTML document (retrieved using the Prototype $$() method, covered in Week 1, Beginning With Prototype.

The element should be inserted into the DOM as the final step since if it's done before observing the events, the events may be fired immediately if the file is already in the browser cache.