Загружать внешний JavaScript синхронно - PullRequest
Новая
       13

Загружать внешний JavaScript синхронно

0 голосов
/ 20 мая 2019

Мне нужно добавить скрипт-тег через JavaScript и , чтобы он выполнялся полностью, так как более поздние операторы полагаются на него. 

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>

Как показывает приведенный выше фрагмент, moment() недоступен в операторе после вставки тега.

I думаю, это можно сделать с помощью eval(...), но этот вариант не популярен.

1 Ответ

1 голос
/ 20 мая 2019

Используйте прослушиватель событий onload для тега <script>: 

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

Обратите внимание, что я добавил обработчик onload до , установив атрибут src. Если вы сначала установите src, , функция обработчика может не сработать .

...