Alex
Підписатись

Alex

Приєднався: 4 роки тому | 9 Читає   16 Читачів | 2.1K

Адмін сайту

  1. Так і є, майже ніколи там нічого не запитував.

  2. Бінго. Нарешті я зміг пояснити 😃

    дивно, що показується лише частина контенту

    Тому я і вирішив що роблю щось не так. Думав що фронтендери давно розв'язали цю задачу і знають як правильно робити.

    Ще пошукаю в чому може бути причина.

  3. Не зовсім те, здається все ще не зрозуміло пояснив.

    На JS не потрібно додатково підтягувати сторінку, це реалізовано на бекенді. Якщо відкривати сторінку в браузері (без ajax), бекенд рендерить повністю всю сторінку яка запитується по вказаному URL. Якщо ж ми з JS робимо ajax запит, тоді бекенд замість повної сторінки повертає лише частину з контентом, який відповідно замінює блок зі старим контентом і міняє URL через pushState.

    Так реалізована вся навігація на DevZone. Ось такий результат приходить від бекенда на ajax запит

    В цей же блок я і додав js який оновлює сторінку якщо немає title, цей хак, в принципі, розв'язує проблему, але не зовсім гарно.

    Без ajax повертається повна сторінка

    І ця проблема виникає лише якщо відкрити сайт, далі перейти по посиланню яке завантажить іншу сторінку по ajax, закрити браузер і після повторного відкриття браузера на цій вкладці замість повної сторінки буде лише частина html з контентом, який був повернутий останнім ajax запитом.

  4. Сторінка виглядає приблизно таким чином

    <html>
        <body>
            <div>
                Блок який постійно залишаються на сторінці
                <a href="/path" class="ajax">отримати дані по ajax і записати в блок #content</a>
            </div>
            <div id="content">
                дані в цьому блоці замінюються ajax запитом
            </div>
            <div>
                Блок який постійно залишаються на сторінці
            </div>
        </body>
    </html>
    

    І JS код

    window.addListenter('click', '.ajax', ajaxLinkLoad);
    
    function ajaxLinkLoad(event, target) {
        var url = target.getAttribute('href');
    
        axios.get(url).then(function (response) {
            document.getElmentById('content').innerHTML = response.data;
            window.history.pushState(null, null, url);
        });
        event.preventDefault();
    }
    

    Він працює як потрібно, при кліці на посилання отримуються дані по ajax і записуються в блок #content, через pushState також змінюється URL.

    Але якщо закрити браузер, а потом відкрити, на сторінці буде лише частина html коду яка була в блоці #content

    Сподіваюся я зрозуміло пояснив.

    PS. В момент відкриття браузера запит на сервер не відсилається, я перевіряв. Це саме браузер так відновлює сторінку залишаючи на ній лише ту частину що була отримана в останньому запиті.

  5. Цього я також, ще не зробив

    Оскільки ви помітили, то доведеться виправити 😄

  6. Це баг. Забув додати оповіщення до цього розділу :)

    Виправлю.

  7. Це ви про мене? То не я на відео.

    В цьому розділі я поширюю цікаві матеріали які знаходжу.

  8. Виправив обрізку тегів, тепер в блоках з кодом нічого не має обрізатися.

  9. Так, ви праві. Виправлено.

  10. В якому браузері вони не показуються? І чи нема там помилок в консолі JS? Зображення повинні завантажуватися при прокрутці сторінки.