HTML 5-Geschichte - Fenster.pushState nicht funktioniert

Ich versuche zu ajax laden die center-Inhalte und aktualisieren Sie die URL ohne das ändern der Seite. Dies alles funktioniert gut, außer, bis ich versuche, auf die Geschichte. Es scheint, Fenster.pushState ist nicht die Aufnahme meiner URL ' s richtig oder popstate-event nicht richtig funktioniert. Ich kann erfolgreich ajax laden der letzten Seite, aber wenn ich drücken Sie die zurück mehr als einmal, bleibt es auf der gleichen Seite. Jede Hilfe wäre sehr geschätzt werden!

$(document).ready(function() {
    $('area, .ajax_link').live('click', function(event) {
        change_image(this, event);
    });

    window.addEventListener('popstate', function(event) {
        change_image(window.location, event);
    });
});

function change_image(e, event) {
    if($(e).attr('target') != '_blank') {
        event.preventDefault();
        $.post(
            base_url+'/kit/ajax_load',
            { url: this_url},
            function(return_data) {
                $('#content img').attr('src', return_data.image_src);
                $('map').html(return_data.imagemap);
            },
            'json'
        );
        history.pushState(null, null, this_url);
        update_links(this_url);
      }
}
  • Gibt es einen bestimmten browser, die Sie sehen, dieses Verhalten, oder ist es das gleiche in allen Browsern, die Sie versucht haben, die Unterstützung pushState?
  • Getestet auf Chrome und Firefox, Gleiches Verhalten.
InformationsquelleAutor Steve | 2011-09-12
  1. 3

    Problem Gelöst

    @Oliver Nachtigall: ich musste aus Verlauf entfernen.pushState von meinem change_image Funktion. Sie können nicht Geschichte nennen.pushState während einer onpopstate. Hier ist die gesamte Arbeits-code. Ich verkürzte es oben nur die notwendigen Teile in Frage. Ich werde das hinzufügen einige fallbacks weiter. Dies ist getestet und funktioniert in Chrome & Firefox. Getestet und funktioniert nicht im IE.

    $(document).ready(function() {
  $('area, .ajax_link').live('click', function(event) {
      history.pushState(null, null, $(this).attr('href'));
      change_image(this, event);
  });

  window.addEventListener('popstate', function(event) {
      change_image(window.location, event);
  });
});

function change_image(e, event) {
    if(!e instanceof jQuery) {
    var this_url = e;
    }
    else {
        var this_url = $(e).attr('href');
    }

    if($(e).attr('target') != '_blank') {
    event.preventDefault();
        $.post(
            base_url+'/kit/ajax_load',
            { url: this_url},
            function(return_data) {
                $('#content img').attr('src', return_data.image_src);
                $('map').html(return_data.imagemap);
            },
            'json'
        );

        update_links(this_url);
    }
}
    • Danke. Ich hatte das gleiche problem (Geschichte war nicht arbeiten, weil ich versehentlich den Aufruf pushState innerhalb einer popState). Sie können jetzt akzeptieren Sie Ihre eigene Antwort, damit es mehr prominent auf der Seite.
    InformationsquelleAutor Steve
  2. 0

    Ist das wichtigste Organ der change_image Funktion geschieht onpopstate? Wenn so wie es aussieht werden Sie drängen, einen neuen Staat jedes mal, wenn Sie pop zu einem Zustand, könnte dies verursacht einige Probleme.

    Wenn Sie mit pushState für das routing, die Sie könnten versuchen, mit einer Bibliothek wie Davis Dinge einfacher machen.

    • Ja, der Hauptteil der change_image Funktion ist immer etwas Los onpopstate. Ich habe nicht gesehen, Davis, aber ich habe gesehen, History.js und ein Jquery-HTML5-History-Plugin. Sieht aus wie eine Bibliothek benutzen für diese kann die Antwort sein, sondern - unabhängig von der Bibliothek, ich muss noch pushState in meinem onpopstate Funktion, richtig? Wie sonst wäre die URL Hinzugefügt werden, um die Geschichte?
    • oops, wird nicht lassen Sie mich fügen Sie es hier, bitte siehe meine Antwort unten.
    InformationsquelleAutor Oliver Nightingale
  3. 0

    Wie ist $(e).attr('target') != '_blank' wenn e ist window.location ?

    Als Sie mit den nativen HTML5-History-API, benötigen Sie außerdem ein Häkchen vor history.pushState(null, null, this_url); nur aufrufen, so, wenn wir von einem link.

    Plus window.addEventListener('popstate', function(event) { die variable event hier ist eigentlich der Staat die Daten.

    Finden Sie in der folgenden Gist für die Arbeit Beispiele:

    InformationsquelleAutor balupton
Schreibe einen Kommentar