问History.js的实现

EN

我很难完全理解如何使用History.js。以下是他们的wiki中的一些代码，其中包含我的注释以供解释：

1.获取对history.js object的引用

获取对History.js对象引用window.History (大写'H')的引用。

var History = window.History;

要检查是否启用了HTML5历史记录，请检查History.enabled。如果不是这样，History.js仍将使用散列标签工作。

History.enabled

2.监听历史记录更改并从此处更新视图

要侦听历史记录状态更改，请绑定到Adapter对象的statechange事件。

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

3.使用推送或替换操作历史记录状态

要将状态添加到历史记录中，请调用pushState。这将向历史堆栈的末尾添加一个状态，该状态将触发如上所示的“statechange”事件。

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

要将状态替换为历史记录，请调用replaceState。这将替换历史堆栈中的最后一个状态，它将触发如上所示的“statechange”事件。

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

pushState和replaceState的不同之处在于，pushState会将一个状态添加到历史列表中，而replaceState会覆盖最后一个状态。

注意: pushState和replaceState序列化了数据对象，所以只使用最少的数据。

4.如果要添加其他ui以便用户能够导航历史记录，请使用导航命令

使用back和go通过代码导航历史记录。

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

历史附加:在中使用"a“标记

要使用带有历史记录的"a“标记，您需要拦截单击事件，并使用event.preventDefault()方法阻止浏览器导航。

示例：

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

我希望这能帮到你。

请参考此问题：Implementing "Back button" on jquery ajax calls

有关RSH的更多信息

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