почему history.replaceState () не работает после метода history. go ()? - PullRequest
Новая
       88

почему history.replaceState () не работает после метода history. go ()?

0 голосов
/ 16 марта 2020

Это пример javascript код 

function history() {
   window.history.pushState('','','#page1');
   window.history.pushState('','','#page2');
   window.history.pushState('','','#page3');
   window.history.go(-1);
   window.history.replaceState('','','#replaced');
}
// expected result in url is www.somewhere.com/#replaced
// but result is /#page2

На самом деле, я хочу перейти на первую страницу и заменить history.state

Есть ли идея решить эту проблему?

1 Ответ

0 голосов
/ 16 марта 2020

Это потому, что метод history.go() является асинхронным. Документы по MDN говорят следующее:

Этот метод является асинхронным. Добавьте прослушиватель для метода popstate, чтобы определить, когда навигация завершена.

Таким образом, replaceState выполняется до завершения go(-1). Именно это и вызывает поведение.

Используйте событие popstate в сочетании с History API для возврата go и замените правильное состояние. Событие popstate запускается всякий раз, когда вы go возвращаетесь в состояния, которые вы отправили в коллекцию истории. Использование history.go(-1), history.back() или нажатие кнопки «Назад» в браузере вызовет его.

И если вы говорите, что хотите go вернуться на страницу first, затем установите значение .go() на -2, если хотите, чтобы go вернулось два места в истории.

В прослушивателе событий проверьте значение location.hash текущего местоположения, которым вы являетесь в. Это позволит вам знать, если вы достигли правильной страницы. Затем используйте replaceState для правильной установки состояния. 

window.addEventListener('popstate', function(event) {
  if (window.location.hash === 'page1') {
    window.history.replaceState('','','#replaced');
  }
});

window.history.pushState('','','#page1');
window.history.pushState('','','#page2');
window.history.pushState('','','#page3');
window.history.go(-2);
...