Відновлення сторінки отриманої по ajax після відкриття браузера
Є такий код в якому виконується 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, але вона ренедериться повністю.
В чому тут проблема?
Відповіді на питання (3)
Схоже така поведінка відбувається через те що URL для ajax запитів такий самий як і для запитів без ajax (сервер визначає по заголовкам яку саме сторінку віддавати). Якщо для ajax запитів використовувати інший URL, то такої проблеми не виникає.
Змінив код наступним чином:
function ajaxLinkLoad(event, target) {
var url = target.getAttribute('href');
// Додав в URL параметр ajax
axios.get(url, {params: {ajax: 1}}).then(function (response) {
document.getElmentById('content').innerHTML = response.data;
// А в історію записується звичайний URL без параметра ajax
window.history.pushState(null, null, url);
});
event.preventDefault();
}
Я не бачу 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-слухач, що спрацьовує на завантаження сторінки, просто ви про нього нічого не кажете.
Поки що додав такий код в блок даних, які повертаються по ajax
<script>
if(!document.querySelector('title')) {
window.location.reload();
}
</script>
Тепер сторінка оновлюється після відкриття браузера.
Але як зробити правильно, все ще не знайшов.