Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.05.2020, 12:09
Новичок на форуме
Отправить личное сообщение для Павел_Левапевский Посмотреть профиль Найти все сообщения от Павел_Левапевский
 
Регистрация: 05.05.2020
Сообщений: 2

Помогите юзеру
ПРИВЕТ.

Завершил верстку сайта и столкнулся с главной проблемой статических страниц (их очень много), хотел создать одну динамическую страницу, которая бы открывала все ссылки с index файла, но так и не получилось, вроде и обучение прошел на w3school html-css-js и на форумах читал много, но там все примеры - таблицы или строчки с датами а вот, чтобы текста-статьи с img динамически отображались такого не видел. Если, кто может помочь, скиньте плииз наглядный пример открытия разных текстовых файлов с img на одной странице.
Ответить с цитированием
  #2 (permalink)  
Старый 06.05.2020, 16:20
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Павел_Левапевский
которая бы открывала все ссылки с index файла
Если все страницы статические, то запрос их таким способом лишен смысла.
Ответить с цитированием
  #3 (permalink)  
Старый 06.05.2020, 23:41
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от Павел_Левапевский
наглядный пример
Пример. Переделал немного.

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.
Ответить с цитированием
  #4 (permalink)  
Старый 07.05.2020, 08:45
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Rise, тогда выгоднее иметь подключаемый ко всем страницам серверный скрипт, который сканирует каталог и строит навигатор. Если конечно в этом задача. А так, это еще с проблемы индексации решать надо, тогда какой смысл?
Ответить с цитированием
  #5 (permalink)  
Старый 08.05.2020, 09:33
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от laimas
Если конечно в этом задача.
SPA вроде надо.
Сообщение от laimas
это еще с проблемы индексации решать надо,
Подправить немного, как здесь написано.
Сообщение от laimas
тогда какой смысл?
Такой же как у всяких Vue Router.
Ответить с цитированием
  #6 (permalink)  
Старый 08.05.2020, 10:20
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Rise, какой в этом смысл если все страницы на 100% статичны? Уж тогда прописать сразу все страницах раз и навсегда, и не будет этого хлама, задержек, и прочих побочных явлений.

Другое дело, если добавляем статичные страницы и не хотим рутины ручной, тогда да, но клиент тогда каким боком помочь может? Тут нужно уж серверу все нужно решать, это куда выгоднее и без лишних велосипедов. И если только малая толика от общего контента, вот тогда выгода от подгрузки может быть.
Ответить с цитированием
  #7 (permalink)  
Старый 09.05.2020, 18:50
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

laimas,
Статическая страница и статические фрагменты страницы (текста-статьи с img) не одно и тоже. Автор хочет фрагменты загружать, а не целые страницы. Какая разница в каком виде база данных, сегодня это может быть статический html <article>...</article>, завтра - статический json { "title": "...", "meta": "...", "article": "..." }, послезавтра - динамические.

Последний раз редактировалось Rise, 09.05.2020 в 19:02.
Ответить с цитированием
  #8 (permalink)  
Старый 09.05.2020, 19:03
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Ну не знаю, все может быть, но я так понимаю из сказанного, что это именно статика на все 100%. И ваш код, это как раз 99% динамической подгрузки контента, выхлопа в таком случае мизер.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться с функцией .height() kos0760 Элементы интерфейса 2 24.05.2017 23:51
Слайдер - карусель блоков (помогите пожалуйста) Viktor.Poberezhniy Общие вопросы Javascript 3 22.07.2014 12:46
Помогите вытащить отсюда калькулятор sergiocharm Общие вопросы Javascript 8 17.04.2012 22:22
Помогите разобраться!!! Greendumb Общие вопросы Javascript 8 19.08.2010 14:04
Помогите! Многоуровневые вкладки! sergeeeeee Элементы интерфейса 2 02.08.2010 23:50