That Smith

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.

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=”/files/jquery-1.2.6.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=”/files/jquery-1.2.6.js”></script>
<script type=”text/javascript” src=”/files/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 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=”/files/init.js”></script>

Dynamically load multiple external scripts and then run them once everything is ready, without document.write, onload, onclick, or another unwanted method outside of DOM.

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 s = document.createElement(”script”);
s.setAttribute(”type”,”text/javascript”);
s.setAttribute(”src”,”http://thatsmith.com/files/jquery-1.2.6.js”);
var h = document.getElementsByTagName(”head”)[0];
h.appendChild(s);
s = document.createElement(”script”);
s.setAttribute(”type”,”text/javascript”);
s.setAttribute(”src”,”http://thatsmith.com/files/jquery-thickbox.js”);
h.appendChild(s);
s = document.createElement(”script”);
s.setAttribute(”type”,”text/javascript”);
s.setAttribute(”src”,”http://thatsmith.com/files/run.js”);
h.appendChild(s);

Or the minified version:

var a=”http://thatsmith.com/files/”;function b(a){var b=document.createElement(”script”);b.setAttribute(”type”,”text/javascript”);b.setAttribute(”src”,a);document.getElementsByTagName(”head”)[0].appendChild(b);};b(a+”jquery-1.2.6.js”);b(a+”jquery-thickbox.js”);b(a+”run.js”);

What this does is add three new script elements to the document while still in DOM, the last of which is 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 and Internet Explorer, and should work in Opera and Safari as well. I’m not quite ready to announce the service I made it for, but you can expect to hear about it soon.

Feel free to use either version of the script above, using b(src); to load additional external scripts if you choose to use the minified version.