В общем решил проблему. Сначала код:
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 файле нужно импортировать необходимые скрипты.
Как-то так.
Простой
