html - 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。收听历史变化并从此处更新您的 View

要监听历史状态更改，请绑定(bind)到 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。如果您想为用户添加额外的用户界面以便能够导航历史记录，请使用导航命令

通过代码使用 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);
})​;

希望对您有所帮助。