Load javascript sequentially from javascript code

Question

I have a javascript widget that is included in the page by inserting a single script tag (since the application should be easily distributed):

<script type="text/javascript" src="loadMyWidget.js"></script> 

loadMyWidget.js then you need to load several script files that must be executed in a specific sequence. I tried loading them async by inserting elements into the DOM script, but that does not give me control over the sequence.

I also tried using head.js, which works great for modern browsers, but I can't get it to work in IE7 and 8.

Minimizing scripts into a single file, unfortunately, is difficult, since it consists of several files from different projects, and I do not know when to update the script.

Anyway, I need to download javascript files from javascript code in a specific sequence and make it work in all browsers, including IE7 and 8.

Answer 1

I ran into the same problem and processed it with

 document.write('<script type="text/javascript" src="other1.js"></script>'); document.write('<script type="text/javascript" src="other2.js"></script>'); runSomeCode(); 

The code will be downloaded and run synchronously. Pros: simple, lightweight, cross-browser compatible, no depots. Cons: ugly.

Read more: fooobar.com/questions/10980 / ...

Answer 2

If you use jQuery.getScript (), you can use it like $ .when () to pause execution until things stop loading.

If by "sequential execution" you mean that you need to download the details before execution, then it will work

 $(function(){ $.when( $.getScript("/script1"), $.getScript("/scirpt2"), $.getScript("/script3") }).done(function(){ // do stuff with the contents of my new script files }); 

If by sequential execution you mean that you need to execute files one by one, try this:

 $.Deferred() .then(function () { return $.getScript("/script1"); }) .then(function () { return $.getScript("/scirpt2"); }) .then(function () { return $.getScript("/script3"); }) .resolve(); 

Of course, this requires jQuery, which after your changes may not work for you.

Recommended Reading

• http://api.jquery.com/jQuery.getScript
• http://api.jquery.com/category/deferred-object/
• http://api.jquery.com/jQuery.when/

Answer 3

If you need vanilla JS, something like this might work:

 function loadScripts(scripts, complete) { var loadScript = function( src ) { var xmlhttp, next; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { return; } } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { eval(xmlhttp.responseText); next = scripts.shift(); if ( next ) { loadScript(next); } else if ( typeof complete == 'function' ) { complete(); } } } xmlhttp.open("GET", src , true); xmlhttp.send(); }; loadScript( scripts.shift() ); } loadScripts(['jquery.js','jquery.plugin.js'], function() { console.log('loaded'); }); 

Tested in Chrome, should work in IE.

Answer 4

Have you tried require.js? http://requirejs.org/

Answer 5

 function loadScript(arrayOfUrlStrings, callback) { var numScripts = arrayOfUrlStrings.length; var count = 0; var headElement = document.getElementsByTagName('head')[0] function onLoad() { count += 1; if (count === numScripts) { callback(); } else { addScript(); } } function addScript() { var script = document.createElement('script'); script.src = arrayOfUrlStrings[count]; script.onload = onLoad; headElement.appendChild(script); } addScript(); }