Как я могу запустить скрипт полученный через fetch?

Question

[Илья Кочкин]

Добрый день, как я могу запустить скрипт полученный через fetch. Грубо говоря, я имею вот такой код

const response = await fetch('/index.php?route=product/compare/add',
            {
                method: 'POST',
                body: data,
                type: 'json'
            }
        );
        const info = await response.json();
        let el = document.createElement('div');

        el.classList.add('wrapperMiniCard')
       el.innerHTML= info.tpl;
        document.querySelector('header').append(el)

Внутри info.tpl у меня разметка в которой есть тег script и код этого скрипта я хочу запустить

Comments

[Надим]

Запускать можно через eval, да вот только у вас сам запрос через fetch составлен некорректно. Вы перепутали $.ajax и fetch, а это совершенно разные вещи.

[Илья Кочкин]

Надим Закиров, хм.. а чем он не правильный?

[Надим]

Илья Кочкин, во первых, параметр type здесь не нужен. Во вторых, совершенно непонятно, что у вас там передается в data, одно дело если FormData или строка, тогда fetch сам подставит заголовки, но если вы отправляйте JSON, то надо указать соответствующие заголовки, иначе сервер просто не поймет, что вы ему отправляйте. В третьих, зачем вы все это записывайте в константы? В этом нет смысла.

Короче, напишите что вы там пытайтесь передать в data, покажу как надо.

[Илья Кочкин]

Надим Закиров, у меня там formData, а почему параметр type не нужен?

[Алексей Ярков]

Илья Кочкин,

а почему параметр type не нужен?

Потому что

Answer 1

[Надим]

Попробуйте вот так:

async function getScript() {
	try {
		var response = await (await fetch('/index.php?route=product/compare/add', { method: 'POST', body: data })).json();
		var doc = new DOMParser().parseFromString(reponse.tpl, 'text/html');
		var code = doc.querySelector('script').innerHTML; eval(code);
		console.log("Следующий скрипт успешно выполнен:\n" + code);
	} catch(err) {
		alert('При загрузке скрипта произошла ошибка, детали см. в консоли.');
		console.log('При загрузке скрипта произошла ошибка:');
		console.error(err);
	}
}

getScript();

Однако может не заработать, так как не понятно, что именно вы пытайтесь отправить в переменной data.

Comments

[Илья Кочкин]

В дата передаются параметры который для сути вопроса не важны и по этому я не описал, скорее всего проблема не в fetch а в innerHtml

[Надим]

Илья Кочкин, type не нужен потому, что есть приписка .json() в конце, которая указывает, что ожидается ответ в виде JSON, который надо распарсить. Если передаете FormData, тогда проблем не должно быть.

Насчет же вытаскивания скрипта из тега <script> - обратите внимание, что я использовал new DOMParser() для парсинга html-кода и нахождения в ней скрипта при помощи querySelector. В общем загуглите как работает DOMParser и eval, тогда вам станет все понятно.

[Илья Кочкин]

Надим Закиров, благодарю

[Надим]

Илья Кочкин, если ответ помог, отметьте его решением.

Answer 2

[AlexLF]

Посмотрите еще здесь на эту тему - решение без DOMParser:
https://www.cyberforum.ru/javascript-beginners/thr...
Там, правда, речь идет о запуске и html-, и js-кода вместе.

Кстати, можно вставлять код как <template>, там js-код запускается.

...Не получается, попробовал. Если в другом файле, это не HTMLElement, а просто код, который нужно еще .куда-то вставлять. И здесь не обойтись без innerHTML. И js-код из другого файла получается неработающий.

Пока сейчас я обхожусь тем, что делаю два файла - html и js отдельно. Html загружаю и вставляю через innerHTML, а js-файл запускаю через динамический импорт - import('jsAddress'). Работает.

Comments

[AlexLF]

Можно еще вставлять с помощью php: <?html include "editing/card.html"; ?>. Так js-код тоже работает, но php я не очень люблю.

Еще можно вставлять через iframe.