Как подключить скрипты которые загружаются через ajax (чистый js)?

Question

[kFerst]

Здравствуйте, есть страница с навигацией, при нажатии на элемент навигации, происходит ajax запрос для получение страницы. После чего полученная страница "вставляется" в блок с id root.

В страницах, которые загружаются через ajax могут быть ссылки на стили и скрипты, по типу этого:

<div class="content">
    content here...
</div>
<script src="/script.js"></script>

Весь этот код я вставляю скриптом ниже

function go(e) {
    let target = e;
    pageLoad(target.dataset.to).then(value => {
        document.getElementById('root').childNodes.forEach(item => {
            item.remove();
        });
        document.getElementById('root').innerHTML = value;
    })
}

Говорят что через innerHTML такое делать нельзя, но других вариантов я не знаю.

Собственно вопрос: Как вставить в страницу контент, полученный через ajax, включая стили и скрипты?

Comments

[kFerst]

Иван, мне нужно запустить скрипты которые подключаются на загружаемой странице через тег.

Answer 1

[kFerst]

В общем решил проблему. Сначала код:

function pageLoad(page) {
    return new Promise(resolve => {
        let xr = new XMLHttpRequest();
        xr.open('VIEW', '/view/' + page);
        xr.send();
        xr.onreadystatechange = function () {
            if (xr.readyState === 4 && xr.status === 200) {
                resolve(xr.response);
            }
        }

    });
}

function go(e) {
    let target = e;
    pageLoad(target.dataset.to).then(value => {
        document.getElementById('root').childNodes.forEach(item => {
            item.remove();
        });
        document.getElementById('root').innerHTML = value;
        let jsLoader = document.createElement('script');
        jsLoader.id = "jsLoader";
        jsLoader.src = "/public/js/" + target.dataset.to + ".js";
        document.getElementById('jsLoader').remove();
        document.querySelector('body').after(jsLoader);

    })
}

Функция go() вешается на ссылку\кнопку и тд с параметром this, после нажатие вытаскивается название страницы, которую нужно загрузить ( указывается в data-to). Далее после загрузки содержимого создается новый элемент скрипта, с указанным id. При указании пути файла скрипта указывается скрипт с названием загружаемой страницы. Старый удаляется а новый добавляется на страницу.

При этом, если нужно загрузить несколько js файлов то в загружаемом js файле нужно импортировать необходимые скрипты.

Как-то так.

Comments

[alex-1917]

вы серъезно?))
открытие америки.
даже самый тупейший код от яндекс-метрики работает ровно также...
только код короче в 12 раз...

Answer 2

[Ihor Bratukh]

Говорят что через innerHTML такое делать нельзя

Нельзя если это данные от пользователя, а если это ваш сервер отдает эти данные, то почему нет, можно.