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对象引用窗口的引用。历史（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以便能够导航历史记录，请使用导航命令

使用返回并通过代码转到历史记录。

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

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

有关RSH

的更多信息

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

History.js的实现

2 个答案: