Обнаружение кнопки браузера Назад после использования history.pushState

Question

У меня есть трехэтапная форма входа, которая показывает/скрывает содержимое на странице по мере продвижения. Когда пользователь переходит от этапа 1 к шагу 2, я называю следующее:

var stateObj = { foo: "bar" }; 
history.pushState(stateObj, "", ""); 

И я вижу кнопку браузера обратно включить.

Теперь я пытаюсь поймать кнопку «Назад», чтобы я мог скрывать/показывать содержимое (например, обратно на этап 1) соответственно.

Как я могу определить кнопку браузера в этом сценарии? Я не хочу, чтобы URL-адрес изменился, я просто хочу вызвать некоторую функцию JS, когда пользователь ударит обратно. Я ориентируюсь на современные настольные/мобильные браузеры.

Answer 1

Вы можете использовать onpopstate событие.

window.onpopstate = function(event) { 
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
}; 

Для получения дополнительной информации см the MDN page about the onpopstate event.

Answer 2

Чтобы обнаружить кнопку назад вы связываться с popstate события:

$(window).bind("popstate", function(e) { 
    var state = e.originalEvent.state; 
    if (state === null) { 
     console.log("step one"); 
    } else { 
     console.log(state.foo); 
    } 
});