Как подгрузить кусок HTML с последующим выполнением скриптов в нём?

Question

[Павел]

Хочу оптимизировать сайт для повышения скорости его загрузки. Как подгружать отдельно скрипт или кусок JS кода в интернете инструкций много. Но мне надо загрузить целый кусок HTML содержащий в себе как разметку так и скрипты. Там содержится Yandex.Metrika, Global site tag и JivoSite. Может ещё что добавится.

Пробую вот так:

window.setTimeout(function() {
	fetch("/js/").then(function (response) {
		response.text().then(function (text) {
			let div = document.createElement('div');
			div.innerHTML = text;
			document.getElementsByTagName("body")[0].append(div);
		});
	});
}, 2000);

Кусок кода подгружается и замечательно вставляется. Но вот JS не выполняется. Есть у кого готовые решения на этот случай?

Comments

[MrColdCoffee]

пересоздавать объект script

[Павел]

MrColdCoffee, а как это сделать? И второй вопрос если в коде как подгружаемые скрипты так и JS?

[Игорь]

я бы лучше вынес скрипты в отельный файл js
и загружал его и инициализировал после загрузки вашего html

это и проще и не нужно все мешать в кучу

[Aetae]

Павел, после div.innerHTML = ...; добавь:

div.querySelectorAll('script').forEach((sourceScript) => {
    const script = document.createElement('script');
    for(const attribute of sourceScript.attributes)
        script.attributes.setNamedItem(attribute.cloneNode(true));
    script.innerHTML = sourceScript.innerHTML;
    sourceScript.parentNode.replaceChild(script, sourceScript);
})

Но да, это хреновая практика.

Answer 1

[Артём Дайнов]

jquery это умеет. Но если вы боитесь об него руки пачкать, тогда вам нужно находить скрипты, и создавать их заново в действующей странице.
У вас есть index.html и content.html
В content.html есть какой-то скрипт между тегами
Вам нужно получить данные между этими тегами. Далее создать на странице index.html новый элемент с именемscript и вставить в .innertext или в .innerHTML данные из скрипта, который находится в content.html
Но я бы на вашем месте так бы не парился, ибо jquery это очень хорошо выполняет за вас.
И да, лучше переместите все скрипты из страниц в файл .js
Так код отлаживать лучше и загружаться будет один раз в index.html
А там хоть content.html вызывайте, хоть какой другой файл, браузер будет распознавать как надо.

Comments

[Павел]

jQuery не устраивает, заказчик это указал в ТЗ. Пришлось отказаться от универсальности и подгружать все скрипты и метрики по отдельности. Спасибо за расширенный ответ.

[Артём Дайнов]

Павел, Нет за что.
Я бы вам рекомендовал бы написать мини библиотеку, которую будете тягать от проекта к проекту, при этом она ваша и заказчику не придраться к вам.

[Павел]

Artem Mamaev, уже сделал похожим образом, в основном код который следует подргужать почти один и тот же. Написал костяк и теперь с не большими поправками будет кочевать из проекта к проекту.

Answer 2

[MrColdCoffee]

Найти в подгруженном коде"<script>"ы
затем создать элемент(ы) скрипт:
document.createElement('script')
вставить текст скрипта в содержимое или ссылку в атрибут
Затем заменить найденный на созданный

Answer 3

[AUser0]

Ох не стоит оптимизировать сайт при помощи fetch-запросов, которые не подразумевают какого-либо кэширования. Если очень хочется - используйте <script>, который будет добавлять в страницу HTML, но ни как не fetch, предназначенный для подгрузки динамических данных!