Load javascript sequentially from javascript code

Question

I have a javascript widget that is included in a page by inserting a single script tag (as the application should be easiliy distributable):

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

loadMyWidget.js then needs to load multiple script files, which has to run in a certain sequence. I've tried to load them async by inserting script elements into the DOM, but that doesn't give me control of the sequence.

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

Minifying the scripts into one file is unfortunately difficult, as it is composed of a number of files from different projects and I wouldn't know when to update the script.

As simple as it seems, I need to load javascript files from javascript code in a certain sequence and get it to work in all browsers, including IE7 and 8.

I've considered RequireJS, but I was hoping for a more simple solution. — Jørgen
– Jørgen, Commented May 31, 2012 at 13:24
Are you using jQuery? In that case you can try nesting $.getScript(). — David Hellsing
– David Hellsing, Commented May 31, 2012 at 13:27
I'm trying to load jQuery, so that won't help me much :P Thanks, though. — Jørgen
– Jørgen, Commented May 31, 2012 at 13:28

David Hellsing · Accepted Answer · 2012-05-31 14:02:57Z

6

If you need vanilla JS, something like this could 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 too.

edited May 31, 2012 at 14:02

answered May 31, 2012 at 13:57

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jørgen Over a year ago

This looks great. I figure this is how most of the AMD frameworks work internally. However, I can't get it to work in IE, and the behaviour is quite similar to my attempt with head.js.

David Hellsing Over a year ago

What is not working in IE? (upgrading my VMware, will check in a minute).

David Hellsing Over a year ago

Just tried it in my IE9 with dev tools for IE7-8 versions and it passed my tests. What IE version are you having problems with?

Jørgen Over a year ago

I'm also using IE9 dev tools. I get a error of an undefined variable, so I guess it's something about the sequence. I got it working with document.write, though I hate that solution.

Thinking Sites · Accepted Answer · 2012-05-31 14:12:15Z

6

If you're using jQuery.getScript() you can use it as a $.when() to hold off execution until things have stopped loading.

If by "sequential execution" you mean that you need to load the requisites before execution the following 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 after the other 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 edits, this may not work for you.

4 Comments

David Hellsing Over a year ago

This does not guarantee sequential execution order, does it?

Thinking Sites Over a year ago

No, I suppose not. I understood it slightly differently on first reading. Working on the edit...

Jørgen Over a year ago

Looks like a decent solution, if you're using jquery, that is :) +1

Thinking Sites Over a year ago

I'll admit, jquery's spoiled me. I don't do anything without it.

Community · Accepted Answer · 2017-05-23 12:17:11Z

4

I have run into this exact same issue and handled 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 loaded and run synchronously. Pros: simple, light, cross browser compliant, no deps. Cons: ugly.

More details: https://stackoverflow.com/a/3292763/235179

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered May 31, 2012 at 14:05

Josh Johnson

11.2k14 gold badges64 silver badges85 bronze badges

4 Comments

Josh Johnson Over a year ago

I know what you mean. Glad to help.

Neptilo Over a year ago

Unless I didn't understand right, this overwrites the whole document. So everything that was previously created in the DOM is lost.

recursive Over a year ago

@Neptilo: You didn't understand right. Nothing is lost. document.write() adds to the existing document.

Neptilo Over a year ago

This was so long ago. I don't remember why I thought it would overwrite the whole document. Looking back at my project, I think I ended up solving the issue by not executing any code in the included scripts, but only declaring classes and functions, and then only calling a "main" function from one of these scripts.

Someth Victory · Accepted Answer · 2012-05-31 14:01:33Z

1

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

answered May 31, 2012 at 14:01

Someth Victory

4,5592 gold badges26 silver badges27 bronze badges

Comments

spinners · Accepted Answer · 2016-09-08 15:25:48Z

1

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();
}

answered Sep 8, 2016 at 15:25

spinners

2,7413 gold badges27 silver badges37 bronze badges

1 Comment

Thinh Vu Over a year ago

If one script failed to load, all script after that will not be load.

Collectives™ on Stack Overflow

Load javascript sequentially from javascript code

5 Answers 5

4 Comments

4 Comments

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

4 Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related