Переход по страницам без перезагрузки

207

09 января 2018, 15:21

Здравствуйте, решил сделать на сайте переход по страницам без перезагрузки, сделал через history.replaceState(null, null, null);.

Так вот, в чем сама проблема, я как понял, это визуально все делается, а у меня на страницах стоит вывод по $_GET[id], а выдает он тот id, который был на прошлой странице. То есть было: test.ru/?id=1, url сам стал test.ru/?id=2, но а на странице вывожу echo $_GET[id];, он выдает 1.

Так как мне сделать, чтобы он менялся не только визуально, но при этом и без перезагрузки? Может можно как то заменить этот get параметр после визуального изменения url?

Answer 1

Приветствую

После того, как вы изменили состояние history (кстати требуется в данной задаче использовать pushState, а не replaceState), нужно самостоятельно произвести требуемые операции по обновлению страницы (отправить запросы, обновить dom и т.д.).

Операции стоит производить в обработчике события popstate

A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document. If the activated history entry was created by a call to history.pushState(), or was affected by a call to history.replaceState(), the popstate event's state property contains a copy of the history entry's state object

window.addEventListener('popstate', function(e) {
  // Здесь обновляем страницу
});

Доп материалы по теме: https://css-tricks.com/using-the-html5-history-api/ https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate