@kFerst

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

Здравствуйте, есть страница с навигацией, при нажатии на элемент навигации, происходит 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, включая стили и скрипты?
  • Вопрос задан
  • 50 просмотров
Решения вопроса 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 файле нужно импортировать необходимые скрипты.

Как-то так.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
BRAGA96
@BRAGA96
Говорят что через innerHTML такое делать нельзя

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы