Implementacja History.js

Question

Próbuję wdrożyć plik History.js dla mojej witryny ajax, dzięki czemu mogę używać przycisków przewijania do przodu i wstecz, a nawet zakładek. Jednak przykład @https://github.com/browserstate/History.js/ ma mnie nieco mylić, jak go wdrożyć. Czy ktoś ma prosty samouczek lub przykład, jak go używać. Przykład możemy użyć do uruchomienia przykładem jest link nawigacji, takie jak

<script type="text/javascript"> 
window.onload = function() 
{ 
function1(); 
}; 

<ul> 
<li><a href="javascript:function1()">Function1</a></li> 
<li><a href="javascript:function2('param', 'param')"</a></li> 
</ul> 

Answer 1

Patrz na to pytanie: Implementing "Back button" on jquery ajax calls

trochę więcej informacji związanych z RSH

How to implement RSH (Really Simple History) for Ajax History Back Button

Answer 2

I miał problemy z pełnym zrozumieniem sposobu korzystania z History.js. Oto kod z ich wiki z moich komentarzy do wyjaśnienia:

1. Get odniesienie do history.js sprzeciw

Aby uzyskać odniesienie do History.js obiektu window.history (Capitol "H").

var History = window.History; 

Aby sprawdzić, czy historia HTML5 jest włączona, sprawdź History.enabled. History.js nadal będzie działał, używając tagów skrótu, jeśli tak nie jest.

History.enabled 

2. Słuchaj zmian historycznych i zaktualizować widok stąd

Aby słuchać historii zmian stanu związania do zdarzenia stateChange obiektu adaptera.

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); 
    History.log(State.data, State.title, State.url); 
}); 

3. Manipulacja States History za pomocą pchania lub zastąpić

Aby dodać stan do historii, zadzwoń pushState. Spowoduje to dodanie stanu do końca stosu historii, który wyzwoli zdarzenie "statechange", jak pokazano powyżej.

History.pushState({data:"any kind of data object"}, "State Title", "?urlforthestate=1"); 

Aby zamienić stan na historię, należy wywołać metodę replaceState. Spowoduje to zastąpienie ostatniego stanu w stosie historii, który wyzwoli zdarzenie "statechange", jak pokazano powyżej.

History.replaceState({data:"any kind of data object"}, "State Title", "?urlforthestate=1"); 

Różnica między pushState i replaceState że pushState doda stan na liście historii, replaceState nadpisuje ostatni stan.

UWAGA: Parametry pushState i replaceState serializują obiekt danych, więc używaj tam minimalnych danych.

4. Jeśli chcesz dodać dodatkowy interfejs dla użytkownika, aby być w stanie poruszać się dzieje, należy użyć polecenia nawigacji

Korzystając z powrotem i przejdź do poruszania historię poprzez kod.

History.back(); 
History.go(2); 

dodatkowe: Użycie „a” tagi z historii

używać „A” tagi z historii trzeba będzie przechwytywać zdarzenia click i zapobiec przeglądarki z nawigowania za pomocą event.preventDefault () metoda.

Przykład:

<a href="dogs/cats" title="Dogs and cats">Dogs and Cats</a> 

$('a')​.click(function(e){ 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    var title = $(this).attr('title'); 
    History.pushState({data:title}, title, url); 
})​; 

Mam nadzieję, że to pomaga.