Question

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

我不确定如何使用它并且它的文档不是很好，nore就是例子。

我试图弄乱它......

$("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）@OneTrickPony发表了评论，我得到了它的工作。但它似乎在页面加载时触发了一个popstate事件。这应该发生吗？我的页面基本上淡入/淡出，这在您最初加载（刷新）浏览器时有点烦人。

Answer 1

请注意，您可以在不使用History.js的情况下使用HTML5历史记录（请参阅this）。

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中的前两个参数来存储其他数据（有关详细信息，请参阅here）。

返回使用：History.back();

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

History.Adapter.bind(window,'statechange',function(){
  var History = window.History;
  var State = History.getState();
  // Do something here with State
});

使用History.js - 我很困惑

更新1

1 个答案: