Запитати

Відновлення сторінки отриманої по ajax після відкриття браузера

Alex
4 місяці тому · 22

Є такий код в якому виконується ajax запит, отриманий результат оновлює блок на сторінці і замінює url за допомогою функції pushState

Html cторінка виглядає приблизно таким чином

<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.

Але якщо закрити браузер і потім відкрити, то на відновленій сторінці буде лише блок даних, який був повернутий останнім ajax запитом, тобто лише та частина сторінки яка була в response.data останнього запиту.

Без зміни URL через pushState виводиться остання сторінка яка не була отримана через ajax, але вона ренедериться повністю.

В чому тут проблема?

javascript ajax pushstate web frontend chrome

Відповіді на питання (2)
4 місяці тому

Я не бачу JavaScript слухача, який спрацьовує на подію при завантаженні сторінки. Спробуйте додати щось на зразок:

window.onload = ajaxOnload; // Слухач, що спрацьовує на завантаження сторінки

window.addListenter('click', '.ajax', ajaxLinkLoad); // Слухач, що спрацьовує на клік для завантаженні контенту

function setData(url) {
  axios.get(url).then(function (response) {
    document.getElmentById('content').innerHTML = response.data;
    window.history.pushState(null, null, url);
  });
}

function ajaxOnload() {
  const url = window.location.href;
  setData(url);
}

function ajaxLinkLoad(event, target) {
  const url = target.getAttribute('href');

  setData(url);
  event.preventDefault();
}

З іншого боку, якщо у вас релоад спрацьовує, то мабуть у вас вже є JavaScript-слухач, що спрацьовує на завантаження сторінки, просто ви про нього нічого не кажете.


4 місяці тому

Поки що додав такий код в блок даних, які повертаються по ajax

<script> 
if(!document.querySelector('title')) { 
    window.location.reload(); 
} 
</script>

Тепер сторінка оновлюється після відкриття браузера.

Але як зробити правильно, все ще не знайшов.


Для відповіді на запитання необхідно авторизуватись

Вхід / Реєстрація

Читайте також: git branch, match point, ubuntu на телефон