JavaScript - How to load external script NON-asynchronously?

Question

I'm looking for code that allows me to use JavaScript to load another JavaScript file NON-asynchronously. I tried this:

var script=document.createElement('script');
script.setAttribute("type","text/javascript");
script.setAttribute("src", "jquery.min.js");
document.getElementsByTagName("head")[0].appendChild(script);

$("div.whatever").css("color","red");

But that doesn't work. It inserts the script node okay, but it continues to run the rest of the script before jQuery loads. This ends up failing because the jQuery code tries to run when $ isn't defined by jQuery yet.

Is there a way to load that script non-async using native JS?

possible duplicate of Dynamically loading JavaScript synchronously — Bakudan
– Bakudan, Commented Feb 9, 2012 at 16:42
Yeah go ahead and delete/close it. Didn't see the duplicates when I searched for some reason. Could only find stuff about async loading. — Jake Wilson
– Jake Wilson, Commented Feb 9, 2012 at 16:53

jAndy · Accepted Answer · 2012-02-09 16:44:44Z

3

You can either use the <script> nodes .onload event handler, to continue/execute any code which should be executed after the script was loaded, like

script.onload = function() {
    // continune here
};

or you can try to set the async flag to false

script.setAttribute("async", false);

While the former solution virtually works in any browser available, the latter one might be not supported by old'ish browsers.

answered Feb 9, 2012 at 16:44

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

Comments

pimvdb · Accepted Answer · 2012-02-09 16:43:22Z

0

Instead of loading synchronously, a slightly better idea might be to use onload:

script.onload = function() {
  // $ is defined now
};

// append it only now to make sure it does not load before setting onload
document.getElementsByTagName("head")[0].appendChild(script);

answered Feb 9, 2012 at 16:43

pimvdb

155k80 gold badges313 silver badges358 bronze badges

Collectives™ on Stack Overflow

JavaScript - How to load external script NON-asynchronously?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related