html – 执行History.js

概述我试图为我的ajax网站实现History.js,以便我可以使用前进和后退按钮甚至书签.然而,@ https://github.com/browserstate/History.js/的例子让我有点困惑,如何实现它.有没有人有一个简单的教程或示例如何使用这个.我们可以用来启动示例的示例是导航链接,例如 <script type="text/javascript">window.onload = 我试图为我的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>

解决方法 我完全不了解如何使用History.Js.这里是他们的维基的一些代码,我的意见解释：

1.获取对history.Js对象的引用

获取引用History.Js对象引用的window.History(CAPItol’H’).

var History = window.History;

要检查是否启用HTML5历史记录,请检查历史记录.如果没有,那么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.使用推或替换 *** 纵历史状态

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

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

要将状态替换为历史记录,请调用replaceState.这将替代历史堆栈中的最后一个状态,如上所示.

History.replaceState({data:"any kind of data object"},"?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);})​;

我希望这有帮助.

总结

以上是内存溢出为你收集整理的html – 执行History.js全部内容，希望文章能够帮你解决html – 执行History.js所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。