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

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

По сути, я провел некоторое исследование использования history.pustate и popstate и сделал так, чтобы строка запроса добавлялась в конец URL-адреса (?v=images) или (_2 _) ... (_ 3_ означает «вид» ) с помощью этого:

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>, но ни один из них не сработал.

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

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


javascript html back-button pushstate
person Rwd    schedule 07.11.2011    source источник

Ответы (2)


arrow_upward
56
arrow_downward

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);
person pimvdb    schedule 07.11.2011
comment
Большое спасибо за помощь @pimvdb и тем более за супербыстрый ответ. Всего наилучшего. - person Rwd; 07.11.2011
comment
Большое спасибо, это так прекрасно! - person pmrotule; 19.03.2014
comment
Здравствуйте, но если данные на начальной странице динамически генерируются ajax из базы данных, как это сделать? - person hous; 09.04.2016

arrow_upward
18
arrow_downward

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

$(document).ready(function() {
    $(window).on("popstate", function (e) {
        location.reload();
    });
});
person Jiří Herník    schedule 22.02.2018