Triển khai History.js

Question

Tôi đang cố gắng triển khai History.js cho trang web ajax của mình để tôi có thể sử dụng các nút tiến và lùi và thậm chí cả dấu trang. Tuy nhiên, ví dụ @https://github.com/browserstate/History.js/ khiến tôi hơi bối rối về cách triển khai nó. Có ai có một hướng dẫn đơn giản hoặc ví dụ về cách sử dụng này. Một ví dụ chúng ta có thể sử dụng để bắt đầu ví dụ này là một liên kết chuyển hướng như

<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

Tham khảo câu hỏi này: Implementing "Back button" on jquery ajax calls

Một số biết thêm liên quan đến RSH

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

Answer 2

I gặp sự cố hoàn toàn hiểu cách sử dụng History.js. Dưới đây là một số mã từ wiki của họ với ý kiến ​​của tôi đối với lời giải thích:

1. Nhận một tham chiếu đến đối tượng history.js

Để có được một tham chiếu đến đối tượng History.js tham khảo window.history (Capitol 'H').

var History = window.History; 

Để kiểm tra xem lịch sử HTML5 có được bật kiểm tra History.enabled hay không. History.js sẽ vẫn hoạt động bằng cách sử dụng thẻ băm nếu không.

History.enabled 

2. Lắng nghe những thay đổi lịch sử và cập nhật điểm của mình từ đây

Để nghe cho lịch sử thay đổi trạng thái liên kết với sự kiện statechange của đối tượng Adapter.

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

3. Thao tác quốc gia lịch sử bằng cách sử dụng push hoặc thay thế

Để thêm một nhà nước về lịch sử, gọi pushState. Điều này sẽ thêm một trạng thái vào cuối ngăn xếp lịch sử sẽ kích hoạt sự kiện 'statechange' như được hiển thị ở trên.

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

Để thay thế trạng thái thành lịch sử, hãy gọi replaceState. Điều này sẽ thay thế trạng thái cuối cùng trong ngăn xếp lịch sử sẽ kích hoạt sự kiện 'statechange' như được hiển thị ở trên.

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

Sự khác biệt giữa pushState và replaceState là pushState sẽ thêm trạng thái vào danh sách lịch sử, replaceState sẽ ghi đè trạng thái cuối cùng.

LƯU Ý: pushState và replaceState tuần tự hóa đối tượng dữ liệu, vì vậy hãy sử dụng dữ liệu tối thiểu tại đó.

4. Nếu bạn muốn bổ sung thêm ui cho người sử dụng để có thể điều hướng lịch sử, sử dụng lệnh điều hướng

Sử dụng trở lại và đi đến hướng lịch sử thông qua mã.

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

khác: Sử dụng "một" thẻ với lịch sử

Để sử dụng "a" thẻ với lịch sử, bạn sẽ cần để đánh chặn nhấp sự kiện và ngăn chặn các trình duyệt từ điều hướng bằng công event.preventDefault () phương pháp.

Ví dụ:

<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); 
})​; 

Tôi hy vọng điều này sẽ giúp.