document.createElement("script") synchronously document.createElement("script") synchronously javascript javascript

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.)

editAs 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/