Как запустить JavaScript из внешнего HTML/SVG файла, используя чистый JavaScript?

Оффтоп javascript
1

Привет, ребята! У меня возникла проблема с выполнением JavaScript из внешнего SVG файла. Вот в чем дело:

Когда я открываю SVG файл отдельно, его JavaScript работает нормально. Если я использую jQuery для включения SVG в HTML через AJAX, все тоже работает как надо.

Но вот загвоздка: когда я пытаюсь сделать то же самое с помощью чистого JavaScript (без jQuery), скрипты из SVG не выполняются!

Я пробовал разные способы:

  • Использовал XMLHttpRequest для загрузки SVG
  • Парсил ответ через DOMParser
  • Добавлял SVG в DOM с помощью appendChild

Но ничего не помогает - JavaScript из SVG все равно не запускается.

Может кто-нибудь подсказать, в чем может быть проблема? Что jQuery делает по-другому? Как заставить это работать на чистом JS?

Буду благодарен за любые идеи!

2

Я сталкивался с похожей проблемой. Дело в том, что при добавлении SVG через appendChild скрипты не выполняются автоматически. Попробуй после вставки SVG в DOM пройтись по всем тегам внутри него и выполнить их код через eval(). Примерно так:

const scripts = svg.querySelectorAll(‘script’);
scripts.forEach(script => {
eval(script.textContent);
});

Это должно сработать. Только будь осторожен с eval() - используй его только для доверенного кода. Удачи!

3

слушай, я тоже недавно мучился с этим. в итоге нашел решение - использовать объект DOMParser для парсинга SVG, а потом добавлять его через innerHTML. вот пример:

let parser = new DOMParser();
let svgDoc = parser.parseFromString(svgString, ‘image/svg+xml’);
container.innerHTML = new XMLSerializer().serializeToString(svgDoc.documentElement);

после этого скрипты из SVG должны выполниться. главное убедиться, что контейнер находится в DOM на момент добавления. если что, пиши - попробуем еще варианты покрутить!

4

Слушай, а ты не пробовал использовать fetch для загрузки SVG? Это современный способ, который может решить твою проблему. Примерно так:

fetch(‘твой_файл.svg’)
.then(response => response.text())
.then(svgData => {
document.getElementById(‘контейнер’).innerHTML = svgData;
});

Этот метод должен сработать и выполнить скрипты. Если нет, можно попробовать добавить SVG через createElementNS. Дай знать, если поможет!