0

我正在实现 ajax 导航，我想利用 html5 历史 API，所以我偶然发现了 History.js。

我不确定如何使用它，它的文档不是很好，例子也不是。

我试图弄乱它...

$("a[href]:not(.no-ajax-navigate)").click(function(e){
    e.preventDefault();
    var path = $(this).attr('data-path');//this is "path/to/page" (clean url's)
    //so I got the path.. now what? pushState?
});

我不知道现在该怎么做..提前谢谢！

更新 1

我查看了@OneTrickPony 评论的[源代码](http://html5.gingerhost.com/new-york)，我得到了它的工作。但似乎在页面加载时触发了 popstate 事件。这应该发生吗？我的页面基本上淡入/淡出，这在您最初加载（刷新）浏览器时有点烦人。

4

1 回答 1

1

需要注意的是，您可以在不使用 History.js 的情况下使用 HTML5 历史记录（参见 参考资料）。

History.js 确实为您提供了一些不错的功能，例如能够在历史调用堆栈中存储额外的数据。以下将设置您的 URL 路径而无需刷新。 

$("a[href]:not(.no-ajax-navigate)").click(function(e){
  e.preventDefault();
  var path = $(this).attr('data-path');//this is "path/to/page" (clean url's)

  // Set the URL using History.js (note the capital H)
  var History = window.History;
  History.pushState(null, null, path);
});

您可以使用 pushState 中的前两个参数来存储其他数据（有关详细信息， 请参见此处）。

要返回使用：History.back();

要捕获 URL 更改事件，您可以使用：

History.Adapter.bind(window,'statechange',function(){
  var History = window.History;
  var State = History.getState();
  // Do something here with State
});
于 2013-01-21T06:14:54.413 回答