Я нашел этот хороший учебник о том, как реализовать маршрутизатор, как в SPA, но с vanilla JS. Весь код здесь: https://github.com/SantiagoGdaR/vanilla-spa/blob/master/js/router.js
Единственная, но важная проблема, с которой я сталкиваюсь, заключается в том, что она загружает только внутреннюю HTML выбранной страницы, и не выполнить часть сценария. Часть скрипта важна в моем коде, поскольку она создает выделенный код между тегами pre / code.
Вот часть кода, которую я пытался улучшить, чтобы получить нужный мне результат, но без успеха:
Router.prototype = {
routes: undefined,
rootElem: undefined,
constructor: function (routes) {
this.routes = routes;
this.rootElem = document.getElementById('app');
},
init: function () {
var r = this.routes;
(function(scope, r) {
window.addEventListener('hashchange', function (e) {
scope.hasChanged(scope, r);
});
})(this, r);
this.hasChanged(this, r);
},
hasChanged: function(scope, r){
if (window.location.hash.length > 0) {
for (var i = 0, length = r.length; i < length; i++) {
var route = r[i];
if(route.isActiveRoute(window.location.hash.substr(1))) {
scope.goToRoute(route.htmlName);
}
}
} else {
for (var i = 0, length = r.length; i < length; i++) {
var route = r[i];
if(route.default) {
scope.goToRoute(route.htmlName);
}
}
}
},
goToRoute: function (htmlName) {
(function(scope) {
var url = 'views/' + htmlName,
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
scope.rootElem.innerHTML = this.responseText;
}
};
xhttp.open('GET', url, true);
xhttp.send();
})(this);
}
};
Здесь строка, которая показывает, что загружен внутренний HTML:
scope.rootElem.innerHTML = this.responseText;
Результат console.log (this.responseText):
<div>Home</div>
Если вместо этого я поставлю external HTML (но он не работает с responseText:
<div data-brackets-id="104" id="app"><div>About</div></div>
Не имеет значения, что я поставил свой код, поскольку проблема заключается в том, чтобы узнать, возможно ли это, возможно, используя Получите метод или измените эту функцию, чтобы перехватить весь код HTML страницы, а не только ее внутреннее содержимое. Спасибо.