Programming: Load javascript dynamically

So I was trying to do something I thought was pretty simple: load javascript dynamically from a web service call in a web page. Basically, I wanted the page to be able to load with minimal code, contact a web service to get more code, and load it into the page for use by controls on the page.

Many of the results I found through searching were adding a script element to a page, while pointing its source at the file name.

<script src="myscript.js" type="javascript/java"></script>

You can accomplish adding this script tag dynamically by adding the script in the DOM:

var scriptTag = document.createElement ( "script" );
scriptTag.src = "myscript.js";
scriptTag.type = "text/javascript";
document.getElementByTag ( "head" )[0].appendChild ( scriptTag );

So, basically the script tag tells the browser to load the file, "myscript.js," after the page has technically loaded. But what if you don't have the javascript in a .js file? What if the javascript is dynamically generated, say from a database, and you don't know what the javascript will be ahead of time, nor do you want to link it to a specific source. Instead you can take plain old text containing javascript, and load it at runtime via the eval function.

function GetScript () {
var script = "alert ('hello!');"
eval ( script );
}

So that example is really simple, right? However it demonstrates the beginnings of dynamic script. If you paste this into a <script> element, then open the website, you will see an alert box that says, "hello!"

The next step would be to call a web service. Now I am using Microsoft's ASP.NET AJAX (http://www.asp.net/ajax), which makes loading and using web services so darn easy anyone can do it. If you want to approach connecting to web services a different way that go right ahead.


<scriptmanager>
<asp:scriptreference path = "ScriptService.asmx"></scriptreference>
</scriptmanager>


<script type="text/javascript">
function GetScript () {
MyNamespace.GetScript ( GetScriptComplete );
}

function GetScriptComplete ( result ) {
eval ( result );
}


So if GetScript returned "alert ( 'hello!' );" then it would now show an alert window saying, "hello!" Alright, so that's still really simple. What if you want to have a button on a website that calls a function named RunScript that you don't even know what it does yet? Okay, so there is probably some security issues here, but if you trust all the code that is placed on the website, why not figure out how to do something like this?

It's actually quite simple really. Instead of the script containing just
alert ( 'hello!' );
you can have the script look like:

RunScript = function () {
alert ( 'hello!' );
}
So now the button on the page would look simply like:

<input onclick="RunScript()" text="Run Me" type="button">


Go ahead, don't be afraid, and try it out! I'm sure anyone reading this post can take it much further than what's here in this post.

Let's sum it all up. You can use a web service to pass javascript as plain text to dynamically load as javascript in the browser using the eval function. Well, that's my take.