Ошибка Javascript history: Возвращение кажется сломанным

Question

Я вхожу в историю браузера с помощью javascript, и у меня почти есть то, что я хочу.
Но я встречаю одну огромную ошибку, позвольте мне объяснить ситуацию:

У меня есть меню, а при нажатии на пункт меню, следующий код выполняется:

$("#content").load("http://example.com/menuitem"); 
window.history.pushState({ page:"http://example.com/menuitem" },"", "http://example.com/menuitem"); 
document.title = 'Menu item'; 

У меня также есть пустой onbeforeunload, поэтому параметры браузера, вперед и назад работают должным образом. И у меня есть функция onpopstate, но я не вижу, чтобы он что-то делал, поэтому не знаю, действительно ли я нуждаюсь в нем.

window.onbeforeunload = function(){ 
}; 

window.onpopstate = function(e){ 
    console.log('onpopstate was called'); 
    if(e.state){ 
     window.location.href = e.state.page; 
    } 
}; 

Теперь моя огромная ошибка: я тестирование следующим образом:

• Тип '' stackoverflow.com в
адресной строки
• типа 'example.com' в
адресной строки
• Нажмите на пункт меню
• Введите 'google.com' в адресной строке
• Вернитесь назад в браузере, ach stackoverflow.com

Когда я возвращаюсь, первый раз, когда я попал на example.com/menuitem, как и ожидалось, но, возвращаясь во второй раз, я снова попал на ту же страницу, на example.com, что я и хочу. С этого момента, когда я смотрю в истории, моя страница «example.com/menuitem» по какой-то причине дублируется.

Что здесь не так, и как я могу исправить свою ошибку?

Answer 1

Я решил свою проблему, мне нужно было добавить .replaceState() на текущей странице (example.com) до .pushState().
И переместите функцию window.onpopstate на вызываемую страницу (example.com/menuitem).

window.history.replaceState({ page:"http://example.com/" },"", "example.com"); 

Получил этот ответ путем попытки и ошибки. Надеюсь, это поможет другим.