Load external JavaScript synchronously

Question

I have to add a script tag via some JavaScript and have it execute in full as the later statements rely on it.

var logIt = (function() {
  var i = 0,
    logging = document.getElementById('logging');
  return function(s) {
    var heading = document.createElement('p');
    heading.innerText = `${++i}:  ${s}`;
    logging.appendChild(heading);
  }
}());

logIt('starting');
var newScriptTag = document.createElement('script');
newScriptTag.src = 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js';
newScriptTag.type = 'text/javascript';
document.head.appendChild(newScriptTag);
try {
  var now = moment().format('HH:mm');
  logIt(`moment loaded.  The time is ${now}`);
} catch (e) {
  logIt(`Moment not loaded: ${e}`);
}

<html>

<head>
  <title>Injecting Script Tags</title>
</head>

<body>
  <h1>Injecting Script Tags</h1>
  <div id="logging"></div>
</body>

</html>

As the snippet above shows, the moment() isn't available on the statement after the tag insertion.

I think it could be done with eval(...), but that option isn't popular.

@GottZ Yes. Due to come compiling/transpiling/compressing/uglification it's not an option though. — BanksySan
– BanksySan, Commented May 20, 2019 at 15:51

Davi · Accepted Answer · 2019-05-20 15:32:09Z

3

Use the onload event listener on the <script> tag:

const URL = 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js';

const onMomentReady = () => {
  console.log('Moment.js is loaded!');
  console.log(typeof moment);
}

var newScriptTag = document.createElement('script');
newScriptTag.onload = onMomentReady;
newScriptTag.src = URL;
// newScriptTag.type = 'text/javascript'; // no need for this

// optional
newScriptTag.async = true;
document.head.appendChild(newScriptTag);

Note that I added the onload handler before setting the src attribute. If you set the src first, the handler function might not fire.

answered May 20, 2019 at 15:32

Davi

4,2941 gold badge18 silver badges29 bronze badges

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

5 Comments

BanksySan Over a year ago

Doesn't this still run moment async? I can't call moment() in the same script, bar within the onMomentReady() method (and after it's been fired).

Davi Over a year ago

Not sure what you expected. Of course, it does run the onMomentReady function asynchronously, because your browser cannot start to load moment before it has loaded, processed & executed the JS which creates the <script> tag. Also, the process of loading does consume time and is therefor async by it's nature – even if you don't put the async attribute onto the <script> tag.

GottZ Over a year ago

just to add to this: not doing stuff async / event oriented in js is extremely bad practice and considered a anti pattern.

BanksySan Over a year ago

@GottZ I have to work with framework I have and I can't async it because it's there's stuff outside my control that will be bundled into it.

GottZ Over a year ago

nothing is impossible. and unless you name that "framework" we cannot help you at all. also if you really need moment then why don't you bundle it into the framework? relying on a third party cdn could result in a possible 404 exception

Collectives™ on Stack Overflow

Load external JavaScript synchronously

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related