Как вызвать изменение при использовании кнопки "Назад" с помощью history.pushstate и popstate?

Я в значительной степени новичок, когда дело доходит до js, поэтому я сожалею, если мне не хватает чего-то очень простого.

В принципе, я провел некоторое исследование использования history.pustate и popstate, и я сделал так, чтобы строка запроса добавилась в конец URL-адреса (?v=images) или (?v=profile)... (v означает "вид" ), используя это:

var url = "?v=profile"
var stateObj = { path: url };
history.pushState(stateObj, "page 2", url);

Я хочу сделать так, чтобы я мог загружать контент в div, но без перезагрузки страницы, которую я сделал с помощью функции .load().

Затем я использовал этот код:

$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;

в разделе $(document).ready(), а затем пробовал только теги <script> и не работал.

Я не знаю, как сделать так, чтобы содержимое менялось, когда я использую кнопку "Назад" или, по крайней мере, делает это, поэтому я могу запустить свою собственную функцию; и я предполагаю, что это имеет какое-то отношение к объекту состояния?! Я просто не могу найти что-либо в Интернете, что ясно объясняет процесс.

Если кто-то сможет мне помочь, это будет потрясающе и спасибо заранее любому, кто это сделает!

Ответы

Ответ 1

popstate содержит только состояние, когда оно есть.

Когда это будет выглядеть следующим образом:

  • загружена начальная страница
  • загружена новая страница с добавлением состояния через pushState
  • нажата кнопка назад

тогда нет состояния, потому что начальная страница загружалась регулярно, а не с помощью pushState. В результате событие onpopstate запускается с state из null. Поэтому, когда оно null, это означает, что исходная страница должна быть загружена.

Вы можете реализовать его таким образом, чтобы history.pushState вызывался последовательно, и вам нужно только предоставить функцию изменения состояния следующим образом: Нажмите здесь для ссылки jsFiddle

function change(state) {
    if(state === null) { // initial page
        $("div").text("Original");
    } else { // page added with pushState
        $("div").text(state.url);
    }
}

$(window).on("popstate", function(e) {
    change(e.originalEvent.state);
});

$("a").click(function(e) {
    e.preventDefault();
    history.pushState({ url: "/page2" }, "/page2", "page 2");
});

(function(original) { // overwrite history.pushState so that it also calls
                      // the change function when called
    history.pushState = function(state) {
        change(state);
        return original.apply(this, arguments);
    };
})(history.pushState);