Browser zurück und Vorwärts-Taste nicht Callback-Methode mit stateFall history.js

Question

I verwendet (https://github.com/browserstate/history.js) und haben ein Stück Code wie dieses

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState(); 
    alert('Inside History.Adapter.bind: ' + State.data.myData); 
}); 

function manageHistory(url, data, uniqueId){ 
    var History = window.History; 
    if (!History.enabled) { return false; }   
    History.replaceState({myData: data}, null, '?stateHistory=' + uniqueId); 
} 

berufen, wenn ich manageHistory() nach meiner Ajax-Aufruf aufrufen, dann History.Adapter.bind Callback-Methode wird korrekt aufgerufen. Wenn ich jedoch auf den Browser zurück und dann auf die Schaltfläche Weiter klicken, die in Seitennavigation von B nach A führen, dann wird A zurück zu B, Rückrufmethode innerhalb History.Adapter.bind wird nicht aufgerufen. Dies geschieht sowohl bei Chrome als auch bei IE9. Wer weiß, wie man dieses Problem beheben kann, muss ich den State nach dem Klick-Browser zurück und dann weiterleiten, um mein DOM zu aktualisieren. Bitte helfen

Hinweis: Ich verwende Version 1.7.1 jquery.history.js für HTML4 Browser IE9

UPDATE (3. Mai 2013): Sprechen Sie ein bisschen mehr über meine Anforderung

Entschuldigung Ich war mit anderen Aufgaben beschäftigt, die ich bis jetzt nicht habe, um dieses Thema zu betrachten. So oncomplete eines Ajax Anrufs, nahm ich diese Informationen, die zu mir zurück, und drücken Sie es in den Zustand. Meine Anforderung ist: Wenn ich von Seite A zu Seite B und dann auf Seite B navigiere, führe ich eine Anzahl von AJAX-Anfragen aus, die zu DOM-Manipulationen führen (lassen Sie jede AJAX-Anfrage, die zur DOM-Manipulation führt, state). Wenn ich auf die Zurück-Schaltfläche klicke, sollte ich zu Seite A zurückkehren, und wenn ich auf die Vorwärts-Schaltfläche klicke, gehe ich zu Seite B mit dem letzten Status, in dem ich war.

Also mein Gedanke war, oncomplete von meinem Ajax Anfrage, würde ich den letzten Staat in der Geschichte durch meinen gegenwärtigen Zustand ersetzen (mein json Gegenstand ist der HTML, den ich zurück von der Ajaxanforderung empfange). Wenn ich Push-Status verwende, sagen wir, ich bin auf Seite B, und ich klicke auf eine Schaltfläche, meine Seite ändert sich jetzt zu aaa, ich pushState aaa. Wenn ich dann auf eine andere Schaltfläche klicke, ändert sich meine Seite jetzt zu bbb, ich drücke pushState bbb. Wenn ich jetzt auf die Zurück-Schaltfläche klicke, würde ich immer noch auf Seite B sein, mit meinem Zustand in History.Adapter.bind(window, 'statechange', function() {}) als aaa, wenn ich wieder auf die Schaltfläche zurück klicke, würde ich auf Seite A gehen. Ich will dieses Verhalten nicht. Ich möchte, dass wenn ich auf Seite B bin mit dem Status , und klicke zurück, ich gehe zu Seite A, und wenn ich vorwärts klicke, würde ich auf Seite B mit dem Status bbb gehen. Ich hoffe, das macht mehr Sinn. Bitte helfen

Answer 1

Ich sehe, dass Sie History.replaceState verwenden, die den letzten Verlaufsstatus im Stapel entfernen und durch den in Parametern angegebenen Zustand ersetzen.

Ich benutze History.pushState in meiner Website, und ist nicht so ein Problem, weil diese Funktion nicht den letzten Zustand ziehen, sondern fügen Sie den neuen Zustand darüber. Es bewirkt, dass die Rückwärtstasten korrekt funktionieren.

Ich hoffe, es hilft Ihnen.

Edit: das Beispiel change of select tag als Ereignis listenner Verwendung:

function manageHistory(url, data, uniqueId){ 
    var History = window.History; 
    if (!History.enabled) { return false; }   
    History.replaceState({myData: data}, null, '?stateHistory=' + uniqueId); 
} 

$('select.select').change(function(e) { 

    e.preventDefault(); 

    // get url 
    // get data 
    // get uniqueId 

    manageHistory(url, data, uniqueId) 


}); 

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState(); 
    // Launch the ajax call and update DOM using State.data.myData 
}); 

Answer 2

Was müssen Sie tun ist, wie folgt:

• Wenn die Seite, die Sie ist kam ein anderer Seite (zB Sie öffnen Seite B und die vorherige Seite war Seite A) Sie tun eine pushState.
• Wenn auf der anderen Seite die vorherige Seite die selbe Seite war, auf der Sie gerade sind, werden Sie einfach eine replaceState machen und die Informationen durch Informationen über Ihren aktuellen Status ersetzen.

(die Verfolgung der vorherigen Seite müssen Sie manuell in einer Variable tun)

Das bedeutet, dass, wenn Sie von A nach B (pushstate) zu neuem Zustand von B (replaceState) , Zurück-Taste (geht zur Status-Information von A) und nächste Vorwärts-Taste (geht zum neuesten Zustand von B). Zusätzlich, wenn Sie A zum ersten Mal öffnen, müssen Sie eine replaceState mit Informationen über den Zustand von A machen, damit A mindestens einen Zustand hat (andernfalls wird es ein leeres Datenobjekt haben).

Es könnte nützlich sein, auf this answer von mir zu schauen, die einfach über die Art ist, wie Sie einen geordneten Geschichtestapel mit pushStates bauen würden. Natürlich nicht genau das, was du willst, aber es ist etwas einfacher geschrieben und zusammen mit den Informationen in dieser Antwort sollte es dir das gewünschte Verhalten geben.

Answer 3

Auch

relpaceState wird immer den B-Zustand löschen.

Verwenden Sie pushState für A und B Staaten.

Und verwenden Sie replacestate für aaa, bbb, ccc Staaten.

function manageHistoryBack(url, data, uniqueId){ 
    var History = window.History; 
    if (!History.enabled) { return false; }   
    History.replaceState({myData: data}, null, '?stateHistory=' + uniqueId); 


} 

function manageHistory(url, data, uniqueId){ 
    var History = window.History; 
    if (!History.enabled) { return false; }   
    History.pushState({myData: data}, null, '?stateHistory=' + uniqueId); 


} 

// Event listenner triggering aaa,bbb,ccc 
$('select.select').change(function(e) { 

    e.preventDefault(); 

    // get url 
    // get data 
    // get uniqueId 

    manageHistoryBack(url, data, uniqueId) 


}); 

// Event listenner triggering A, B 
$('select.select').change(function(e) { 

    e.preventDefault(); 

    // get url 
    // get data 
    // get uniqueId 

    manageHistory(url, data, uniqueId) 


}); 


History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState(); 
    // Launch the ajax call and update DOM using State.data.myData 
}); 

Viel Glück