History.js的实现

Question

History.js的实现

15

我正在尝试为我的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>

- Kern Elliott

请在此处查看可能的答案和相关问题：https://dev59.com/NGYr5IYBdhLWcg3w7udx - dansalmo

2个回答

3

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

与RSH相关的更多信息。

如何为Ajax历史记录后退按钮实现RSH（Really Simple History）

- Siva Charan

教程非常有帮助，只有一个问题，关于jQuery中的$('#').load()是否相当于像onlick='javascript:function1();'这样的ajax请求？ - Kern Elliott

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zachzurn · Accepted Answer

我曾经不太明白如何使用History.js。这里是他们维基上的一些代码，附有我的注释以作解释：

1. 获取一个指向history.js对象的引用

获取指向History.js对象的引用，请参考 window.History（大写H）。

var History = window.History;

要检查 HTML5 历史记录是否可用，请检查 History.enabled。如果不可用，History.js 仍将使用哈希标签。

History.enabled

2. 监听历史记录变化并从这里更新您的视图

要监听历史状态的变化，请绑定到适配器对象的statechange事件。

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

3. 通过push或replace方法操作历史状态

调用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);
});

我希望这可以帮助到你。