Помогите юзеру
ПРИВЕТ.
Завершил верстку сайта и столкнулся с главной проблемой статических страниц (их очень много), хотел создать одну динамическую страницу, которая бы открывала все ссылки с index файла, но так и не получилось, вроде и обучение прошел на w3school html-css-js и на форумах читал много, но там все примеры - таблицы или строчки с датами а вот, чтобы текста-статьи с img динамически отображались такого не видел. Если, кто может помочь, скиньте плииз наглядный пример открытия разных текстовых файлов с img на одной странице. |
Цитата:
|
Цитата:
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() можно. |
Rise, тогда выгоднее иметь подключаемый ко всем страницам серверный скрипт, который сканирует каталог и строит навигатор. Если конечно в этом задача. А так, это еще с проблемы индексации решать надо, тогда какой смысл?
|
Цитата:
Цитата:
Цитата:
|
Rise, какой в этом смысл если все страницы на 100% статичны? Уж тогда прописать сразу все страницах раз и навсегда, и не будет этого хлама, задержек, и прочих побочных явлений.
Другое дело, если добавляем статичные страницы и не хотим рутины ручной, тогда да, но клиент тогда каким боком помочь может? Тут нужно уж серверу все нужно решать, это куда выгоднее и без лишних велосипедов. И если только малая толика от общего контента, вот тогда выгода от подгрузки может быть. |
laimas,
Статическая страница и статические фрагменты страницы (текста-статьи с img) не одно и тоже. Автор хочет фрагменты загружать, а не целые страницы. Какая разница в каком виде база данных, сегодня это может быть статический html <article>...</article>, завтра - статический json { "title": "...", "meta": "...", "article": "..." }, послезавтра - динамические. |
Ну не знаю, все может быть, но я так понимаю из сказанного, что это именно статика на все 100%. И ваш код, это как раз 99% динамической подгрузки контента, выхлопа в таком случае мизер.
|
| Часовой пояс GMT +3, время: 13:07. |