History.js 的实现

Question

我正在尝试为我的 ajax 站点实现 History.js，以便我可以使用前进和后退按钮，甚至书签。然而，这个例子@ https://github.com/browserstate/History.js/ 让我有点困惑如何实施。有谁有关于如何使用它的简单教程或示例。我们可以用来启动该示例的一个示例是导航链接，例如

<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

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

1。获取对history.js 对象的引用

获取对History.js 对象引用window.History (Capitol '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);
})​;

我希望这会有所帮助。

Answer 2

请参考这个问题：在 jquery ajax 调用上实现“后退按钮”

一些与 RSH 相关的更多信息

如何为 Ajax 历史实现 RSH（真正简单的历史）返回按钮