document.createElement("script") synchronously
You can create your <script>
element with an "onload" handler, and that will be called when the script has been loaded and evaluated by the browser.
var script = document.createElement('script');script.onload = function() { alert("Script loaded and ready");};script.src = "http://whatever.com/the/script.js";document.getElementsByTagName('head')[0].appendChild(script);
You can't do it synchronously.
edit — it's been pointed out that, true to form, IE doesn't fire a "load" event on <script>
tags being loaded/evaluated. Thus I suppose the next thing to do would be to fetch the script with an XMLHttpRequest and then eval()
it yourself. (Or, I suppose, stuff the text into a <script>
tag you add; the execution environment of eval()
is affected by the local scope, so it won't necessarily do what you want it to do.)
edit — As of early 2013, I'd strongly advise looking into a more robust script loading tool like Requirejs. There are a lot of special cases to worry about. For really simple situations, there's yepnope, which is now built into Modernizr.
This isn't pretty, but it works:
<script type="text/javascript"> document.write('<script type="text/javascript" src="other.js"></script>');</script><script type="text/javascript"> functionFromOther();</script>
Or
<script type="text/javascript"> document.write('<script type="text/javascript" src="other.js"></script>'); window.onload = function() { functionFromOther(); };</script>
The script must be included either in a separate <script>
tag or before window.onload()
.
This will not work:
<script type="text/javascript"> document.write('<script type="text/javascript" src="other.js"></script>'); functionFromOther(); // Error</script>
The same can be done with creating a node, as Pointy did, but only in FF. You have no guarantee when the script will be ready in other browsers.
Being an XML Purist I really hate this. But it does work predictably. You could easily wrap those ugly document.write()
s so you don't have to look at them. You could even do tests and create a node and append it then fall back on document.write()
.
This is way late but for future reference to anyone who'd like to do this, you can use the following:
function require(file,callback){ var head=document.getElementsByTagName("head")[0]; var script=document.createElement('script'); script.src=file; script.type='text/javascript'; //real browsers script.onload=callback; //Internet explorer script.onreadystatechange = function() { if (this.readyState == 'complete') { callback(); } } head.appendChild(script);}
I did a short blog post on it some time ago http://crlog.info/2011/10/06/dynamically-requireinclude-a-javascript-file-into-a-page-and-be-notified-when-its-loaded/