|
Сообщение от Павел_Левапевский
|
|
наглядный пример
|
Пример. Переделал немного.
index.html (не работает через file://)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Single Page Application</title>
</head>
<body>
<header>
Header
<nav>
<a href="#home">Home</a> | <a href="#about">About</a>
</nav>
</header>
<main>
<!-- Ajax content -->
</main>
<footer>
Footer
</footer>
<script src="js/router.js"></script>
</body>
</html>
js/router.js
var root = document.querySelector('main');
window.addEventListener('hashchange', onHashChange);
onHashChange();
function onHashChange() {
ajax('views/' + (window.location.hash.slice(1) || 'home') + '.html', onAjaxLoad, onAjaxError);
}
function onAjaxLoad() {
if (this.status == 200) {
root.innerHTML = this.responseText;
document.title = root.querySelector('header').textContent;
var scripts = root.querySelectorAll('script');
for (i = 0; i < scripts.length; i++) window.eval(scripts[i].textContent);
} else {
root.innerHTML = 'Status error';
}
}
function onAjaxError() {
root.innerHTML = 'Connection error';
}
function ajax(url, onLoad, onError) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.addEventListener('load', onLoad);
xhr.addEventListener('error', onError);
xhr.send();
}
views/home.html
<article>
<header>Home</header>
</article>
views/about.html
<article>
<header>About</header>
<script>console.log('About')</script>
</article>
Примеры разметки: header, nav, footer, article -
здесь, main -
здесь.
На jQuery через
.load() можно.