Здесь мы хотим убедиться, что скрипт загружен правильно. Вы можете попытаться использовать слушателей, когда пытаетесь загрузить скрипт динамически, и быть уверенным, что скрипт загружен правильно.
Вы можете прослушивать события мутации, но это больше не рекомендуется из-за производительности и браузера проблемы совместимости
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events
Второй альтернативой является присоединение событий к добавленному childNode. Фактически, метод appendChild возвращает childNode, и он может прослушивать 3 события, которые запускаются окном.
Здесь потенциальная реализация ванили javascript:
const id = "scriptID";
const src = "your script src";
const scriptElement = document.getElementById(id);
if (!scriptElement) {
const script = document.createElement("script");
if (script) {
script.src = src;
script.id = id;
const loadError = () => throw new Error("can't load the script")
const loadSuccess = () => console.log("loaded");
const attachedScript = document.body.appendChild(script);
const onloadEvent = attachedScript.addEventListener("load", loadSuccess);
const onerrorEvent = attachedScript.addEventListener("error", loadError);
const onavortEvent = attachedScript.addEventListener("abort", loadError);
} else {
const error = "can't load the script";
throw new Error(error);
}
}
Однако вышеприведенное решение прослушивает событие загрузки, которое запускается окном, когда страница полностью загружена (включая ресурсы), что В отличие от события DocumentContentLoaded, которое вызывается при загрузке DOM, но не ожидает загрузки ресурсов:
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
Что не так с Выше указано, что событие загрузки должно использоваться при первой загрузке, а не при мутации DOM.
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
Вместо элегантного решения будет использоваться вместо MutationObserver, предназначенный для замены функции MutationEvents:
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
const id = "scriptID";
const src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js";
const scriptElement = document.getElementById(id);
if (!scriptElement) {
const script = document.createElement("script");
if (script) {
script.src = src;
script.id = id;
const observer = new MutationObserver(() => {
console.log("change being done");
observer.disconnect();
});
const config = { attributes: false, childList: true, subtree: true };
observer.observe( document.body, config);
document.body.appendChild(script)
} else {
const error = "can't load the script";
throw new Error(error);
}
}
MutationObserver ищет мутацию DOM, но не запускается, когда скрипт на самом деле загружен, поэтому использование события load из окна также сделает решение более сильным.
Теперь, зачем все это нужно для простого добавления скрипта в DOM? Вот некоторые из причин:
- Одна вещь - это добавление скрипта в DOM, но важно то, что когда скрипт загружен
- , мы должны быть очень осторожны при прослушивании манипуляций с DOM события, потому что это может легко привести к снижению производительности
- , при добавлении дочернего элемента нет необходимости прислушиваться к ошибке, так как случаи сбоя редки