Dynamically Load and Run JavaScript from JavaScript

By • Sep 24th, 2008 • Category: Advice

I usually only post How-to’s after I find a way to do something that has been vexing me for a while. This is another one of those tutorials.

Recently I was working on a new web service that requires users to add a line of JavaScript to their website, and from there the service loads all the other necessary files and automatically does its thing after the page loads.

The problem I ran into was I wanted to make it so I only have to give them one line of code, and so it would run automatically without any click or action on their part. Essentially, I needed one script that would both load the other scripts and run them automatically once everything was ready.

If you know anything about JavaScript, then you have probably already found that this is near impossible. Reason being, you can do one or the other from a single block of JavaScript, but not both.  Browsers also act differently, so one method doesn’t always work on all browsers.

For example, let’s say we want to load jQuery and then use it to show a hidden element. To do this normally we would use:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>

Followed by:

<script type=”text/javascript”>
$(“#showme”).show();
</script>

Of course this means we have to add more than one line of code. What I wanted was more along the lines of:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script type=”text/javascript” src=”run.js”></script>

Except in a single block of script.

I will save you the trouble of explaining the trials and errors I went through and why external JavaScript libraries cannot be loaded and run from a single script block, and will instead show you the cross-browser solution I came up to make:

<script type=”text/javascript” src=”init.js”></script>

Dynamically load multiple external scripts and then run them once everything is ready, without onload, onclick, or another unwanted method after the page loads.

You can see a demonstration of my solution at Dynamically Load and Run JavaScript Demonstration.

My solution is to call the above line of script which contains:

var scripts=[];
scripts.push(‘http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’);
scripts.push(‘jquery-thickbox.js’);
scripts.push(‘run.js’);
for(src in scripts)
document.writeln(‘<scri’+'pt src=”‘+scripts[src]+’” type=”text/javascript”></sc’+'ript>’)

Or the minified version:

(function(scripts,src){for(src in scripts)document.writeln(‘<scri’+'pt src=”‘+scripts[src]+’” type=”text/javascript”></sc’+'ript>’)})(['http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js','jquery-thickbox.js','run.js']);

What this does is add three new script elements to the document while the page loads, each able to call functions declared in those before it because it’s inside a seperate <script> block.

This solution has been tested in various versions of Firefox, Opera, and Internet Explorer, and has been updated to work with Chrome and Safari as well.

My older version which relied on document.createElement occasionally failed in Webkit because the browser continued to run embedded scripts before those dynamically added in DOM.  This update should work better. :)

Feel free to use either version above to dynamically load additional external scripts from one javascript file.

Tagged as: ,


Email this author | All posts by

4 Responses »

  1. Look nice and good !

  2. This is EXACTLY what I was looking for. Thank you for posting this!

  3. Quick question: why do you split
    ‘<script src=”‘
    into
    ‘<scri’+'pt src=”‘
    ?

  4. You freed me from lot of frustration! Thanks!

Trackbacks

Leave a Reply