Сайт с ajax запросами

[METENC]

Приветствую. 

Сделал нечто 

https://lnf353.github.io/desoliosite/

У всего этого дела есть одна проблема, которая меня волнует(проблемы есть ещё, но не такие волнительные для меня), если перейти в раздел, которые подгружает кусок кода в блок past-content, то посредством стрелочек назад\вперед и api history можно ходите по странице взад\вперед. Но если, нажать refresh, то перезагружается только тот вставленный кусок когда. Как сделать так, чтоб при нажать кнопки ОБНОВИТЬ появлялась вся страница с загруженным в данный момент разделом. Я подозреваю, что для этого нужно php, но пчп я не трогал даже нежно пока. 

Ну и критика вёрстки, конечно, приветствуется. 

(забыл поработать с кнопкой на стартовом экране)

Спасибо. 

Edited September 28, 2017 by METENC

[Switch74]

Когда мы переходим по ссылкам url в адресной строке меняется на адрес подгружаемой страницы, например: https://lnf353.github.io/desoliosite/service.html
естесно после рефреша будет грузиться только она.
В этом вам может помочь window.history. например по адресу  https://lnf353.github.io/desoliosite/service/index.html (а следовательно и  https://lnf353.github.io/desoliosite/service/) вы грузите страницу, а https://lnf353.github.io/desoliosite/service/service.html вы грузите только контент.
При кликах по ссылкам вида https://lnf353.github.io/desoliosite/service/service.html вы отбрасываете конечный файл и получаете адрес по которому у вас грузится вся страница и именное его нам и нужно поместить в адресную строку с помощью window.history в место адреса на контент.

С php все может быть куда проще: у меня при клике по ссылке https://lnf353.github.io/desoliosite/service/ отправляется запрос с каким-либо параметром, которые указывает php что нужно отдавать контент, при рефреше данного параметра естесно нет, следовательно отдаем всю страницу.

[METENC]

navigation.onclick = function(e)  {
        var target = e.target;
    if(target.tagName != "A") return;
    var href= target.getAttribute('href');
    
    history.pushState(null, null, href);
    insertContent(href);
    e.preventDefault();

   };

Вот пуш href полученного из ссылки, на которой клик сработал. Т.е. получается, что нужно пушить не конечный адрес в историю, а всю строку? 

history.pushState(null null https://lnf353.github.io/desoliosite/ + href)  <—--  так ?

Честно говорят, не очень я понимаю, что нужно сделать. Когда я нажимаю кнопку refresh, то какие команды браузер-то выполняет? Он посылает запрос на сервер? В js есть функция, которой можно перезагрузить страницу(кажется то что нужно), но как мне обработать событие reload page, что повесить на него функцию с перезагрузкой? 

[Switch74]

вот получили вы href, он у вас скорее всего будет равен например /desoliosite/service/service.html, ваша задача обрезать service.html
можно например так: https://jsfiddle.net/40vrrrsL/ по тыкайте, надеюсь разберетесь

[METENC]

window.onload = function()  {
    var navigation = document.querySelector(".site-parts"),

navigation.onclick = function(e) {
        var target = e.target;
    if(target.tagName != "A") return;
    var href= target.getAttribute('href');
    
    history.pushState(null, null, href);
    insertContent(href);
    e.preventDefault();
    };
}; \\ тут кончается onload

        function insertContent(href) {
        var req = new XMLHttpRequest();
        req.onreadystatechange = function() {
            if(req.readyState == 4) {
             document.querySelector('.past-content').innerHTML = req.responseText;
            }
        };
        req.open('GET', "https://lnf353.github.io/desoliosite/" + href.split('/').pop());
        req.send();
        }

        function historyCome() {
        insertContent(location.pathname);
        }

        window.addEventListener('popstate', historyCome);

1) В href я получаю только home.html, service.html т.к. они лежат прямо в корне сайта, где и index лежит:

<a class="site-parts__link" href="our-team.html">Our team</a>

2) Допустим я обрезал href, то почему я получу, например desoliosite/service? Я получу desoliosite/. Если запушить в историю ссылку без *.html, то любые движения по истории будут меня перебрасывать на стартовую страницу. У меня есть предположение, что можно в функцию historyCome добавить конструкцию с выбором вида: 

 function historyCome() {

var newHref = location.pathname;

if(href == "desoliosite/service") // если в отрезанной ссылке есть service

      newHref = "desoliosite/service/service.html" // то вставить в переменну контент, который должен там и тд
        insertContent(newHref); // подгрузить контент по ссылке 
        }

3) Вероятно этот мой скрипт крайне ущербный и нужно его переделывать целиком. 

4) Извините, если задаю ЧУДОВИЩНО глупые вопросы, но я продолжаю не понимать что делать, чтоб добиться  желаемого результата.   

Edited September 30, 2017 by METENC

[Switch74]

я вам советую переделать пути к вашим страницам следующим образом:
/desoliosite/service.html = /desoliosite/service/
так вы сможете указать для одной страницы несколько файлов:
index.html - вся страница
service.html - только контент
подгружая /desoliosite/service/service.html вы вставляете только контент но в адресной строке вы указываете /desoliosite/service/, что даст вам при обновлении страницы загрузку /desoliosite/service/index.html, которая является полной страницей, а не обрезанным контентом.

Если вы хотите оставить структуру сайта так как есть, то вам нужно использовать серверный язык, например php 

[METENC]

Спасибо за помощь. Я начал делать по такой схеме, но у меня что-то где не сошлось и я плюнул.  В итоге так и нужно было делать. Кривенько, косенько, но вроде бы работает. 

Запишу в блокнотик ссылку на ваш хостинг. На всякий случай

[Switch74]

Что-то давно я не проверял этот хостинг, походу там уже нет бесплатного...
На до бы поправить подпись

[Николя223]

2 часа назад, Switch74 сказал:

походу там уже нет бесплатного...

я ночью тоже посмотреть зашел. страницу с бесплатным аккаунтом нашел только раза с пятого

[Switch74]

Угу, тоже нашел в самом низу. Раньше они его так далеко не прятали.
Только он походу на 30 дней только при регистрации.
Хотя может быть и нет