Как управлять DOM на чистом JavaScript?
Управление DOM с помощью JavaScript в современных браузерах и IE 11+
Загрузите файл JavaScript
// Create new script element
const script = document.createElement('script');
script.src = '/path/to/js/file.js';
// Append to the `head` element
document.head.appendChild(script);
Выполнить код при загрузке файла JavaScript
// Create new script element
...
script.addEventListener('load', function() {
// The script is loaded completely
// Do something
});
// Append to the `head` element
...
Загрузите несколько файлов JavaScript по порядку
Предположим, что вы хотите загрузить массив файлов JavaScript arrayOfJs, по порядку.
Для этого нам нужно загрузить первый скрипт и загрузить второй скрипт, когда первый будет загружен полностью. И продолжайте делать это, пока все скрипты не будут загружены.
// Load a script from given `url`
const loadScript = function(url) {
return new Promise(function(resolve, reject) {
const script = document.createElement('script');
script.src = url;
script.addEventListener('load', function() {
// The script is loaded completely
resolve(true);
});
document.head.appendChild(script);
});
};
// Perform all promises in the order
const waterfall = function(promises) {
return promises.reduce(
function(p, c) {
// Waiting for `p` completed
return p.then(function() {
// and then `c`
return c().then(function(result) {
return true;
});
});
},
// The initial value passed to the reduce method
Promise.resolve([])
);
};
// Load an array of scripts in order
const loadScriptsInOrder = function(arrayOfJs) {
const promises = arrayOfJs.map(function(url) {
return loadScript(url);
});
return waterfall(promises);
};
Функция loadScriptsInOrder возвращает Promise и указывает, будут ли успешно загружены все скрипты:
loadScriptsInOrder([
'/path/to/file.js',
'/path/to/another-file.js',
'/yet/another/file.js',
]).then(function() {
// All scripts are loaded completely
// Do something
})
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться