Как вызвать изменения при использовании кнопки «Назад» с history.pushstate и popstate? - PullRequest
Новая
       36

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

44 голосов
/ 07 ноября 2011

Я довольно новичок, когда дело доходит до 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>, но ни один из них не работал.

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

Если бы кто-то мог мне помочь, это было бы удивительно, и спасибо заранее всем, кто знает!

Ответы [ 2 ]

52 голосов
/ 07 ноября 2011

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

Когда это происходит так:

  1. загружена начальная страница
  2. новая страница загружена, состояние добавлено через pushState
  3. нажата кнопка возврата

тогда нет состояния, потому что начальная страница загружалась регулярно, а не с 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);
7 голосов
/ 22 февраля 2018

Возможно, это не лучшее решение, и, возможно, оно не соответствует вашим потребностям.Но для меня было лучше просто перезагрузить страницу.Таким образом, страница соответствует и загружает все в соответствии с текущей строкой запроса. 

$(document).ready(function() {
    $(window).on("popstate", function (e) {
        location.reload();
    });
});
...