web-dev-qa-db-de.com

Wie kann ich eine Änderung auslösen, wenn ich den Zurück-Button mit history.pushstate und popstate benutze?

Ich bin so ziemlich ein Anfänger, wenn es um js geht. Es tut mir leid, wenn ich etwas wirklich Einfaches vermisse.

Grundsätzlich habe ich mich mit der Verwendung von history.pustate und popstate befasst und eine Abfragezeichenfolge am Ende der URL (?v=images) Oder (?v=profile) Eingefügt. ) ... (v bedeutet 'Ansicht') mit diesem Befehl:

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

Ich möchte es so machen, dass ich Inhalte in ein Div laden kann, aber ohne die Seite neu zu laden, die ich mit der Funktion .load() gemacht habe.

Ich habe dann diesen Code benutzt:

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

in Abschnitt $(document).ready() und später innerhalb von nur <script> - Tags ausprobiert, ohne dass dies funktioniert hat.

Ich weiß nicht, wie ich es machen soll, damit sich der Inhalt ändert, wenn ich die Zurück-Schaltfläche benutze, oder zumindest, damit ich meine eigene Funktion dazu auslösen kann. und ich nehme an, es hat etwas mit dem Staatsobjekt zu tun ?! Ich kann einfach nichts online finden, was den Prozess klar erklärt.

Wenn mir jemand helfen könnte, wäre es unglaublich und ich danke Ihnen im Voraus allen, die dies tun!

45
Rwd

Das popstate enthält nur einen Zustand, wenn es einen gibt.

Wenn es so geht:

  1. erste Seite geladen
  2. neue Seite geladen, Status über pushState hinzugefügt
  3. zurück-Taste gedrückt

dann gibt es keinen Status, da die erste Seite regelmäßig geladen wurde, nicht mit pushState. Infolgedessen wird das Ereignis onpopstate mit einem state von null ausgelöst. Wenn es sich also um null handelt, bedeutet dies, dass die Originalseite geladen werden sollte.

Sie könnten es so implementieren, dass history.pushState wird konsistent aufgerufen und Sie müssen nur eine Statusänderungsfunktion wie diese bereitstellen: Klicken Sie hier, um den jsFiddle-Link aufzurufen

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);
52
pimvdb

Vielleicht ist es nicht die beste Lösung, und vielleicht passt es nicht zu Ihren Bedürfnissen. Aber für mich war es am besten, einfach die Seite neu zu laden. Die Seite ist also konsistent und lädt alles entsprechend der aktuellen Abfragefolge.

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