06.05.2020, 12:09
|
Новичок на форуме
|
|
Регистрация: 05.05.2020
Сообщений: 2
|
|
Помогите юзеру
ПРИВЕТ.
Завершил верстку сайта и столкнулся с главной проблемой статических страниц (их очень много), хотел создать одну динамическую страницу, которая бы открывала все ссылки с index файла, но так и не получилось, вроде и обучение прошел на w3school html-css-js и на форумах читал много, но там все примеры - таблицы или строчки с датами а вот, чтобы текста-статьи с img динамически отображались такого не видел. Если, кто может помочь, скиньте плииз наглядный пример открытия разных текстовых файлов с img на одной странице.
|
|
06.05.2020, 16:20
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Павел_Левапевский
|
которая бы открывала все ссылки с index файла
|
Если все страницы статические, то запрос их таким способом лишен смысла.
|
|
06.05.2020, 23:41
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,671
|
|
Сообщение от Павел_Левапевский
|
наглядный пример
|
Пример. Переделал немного.
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, 06.05.2020 в 23:58.
|
|
07.05.2020, 08:45
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Rise, тогда выгоднее иметь подключаемый ко всем страницам серверный скрипт, который сканирует каталог и строит навигатор. Если конечно в этом задача. А так, это еще с проблемы индексации решать надо, тогда какой смысл?
|
|
08.05.2020, 09:33
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,671
|
|
Сообщение от laimas
|
Если конечно в этом задача.
|
SPA вроде надо.
Сообщение от laimas
|
это еще с проблемы индексации решать надо,
|
Подправить немного, как здесь написано.
Сообщение от laimas
|
тогда какой смысл?
|
Такой же как у всяких Vue Router.
|
|
08.05.2020, 10:20
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Rise, какой в этом смысл если все страницы на 100% статичны? Уж тогда прописать сразу все страницах раз и навсегда, и не будет этого хлама, задержек, и прочих побочных явлений.
Другое дело, если добавляем статичные страницы и не хотим рутины ручной, тогда да, но клиент тогда каким боком помочь может? Тут нужно уж серверу все нужно решать, это куда выгоднее и без лишних велосипедов. И если только малая толика от общего контента, вот тогда выгода от подгрузки может быть.
|
|
09.05.2020, 18:50
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,671
|
|
laimas,
Статическая страница и статические фрагменты страницы (текста-статьи с img) не одно и тоже. Автор хочет фрагменты загружать, а не целые страницы. Какая разница в каком виде база данных, сегодня это может быть статический html <article>...</article>, завтра - статический json { "title": "...", "meta": "...", "article": "..." }, послезавтра - динамические.
Последний раз редактировалось Rise, 09.05.2020 в 19:02.
|
|
09.05.2020, 19:03
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Ну не знаю, все может быть, но я так понимаю из сказанного, что это именно статика на все 100%. И ваш код, это как раз 99% динамической подгрузки контента, выхлопа в таком случае мизер.
|
|
|
|