编辑 - 2013年末

另一个名为“sammy.js”的哈希库也很受欢迎。它有一个很好的客户端路由映射。客户端路由结构用于处理hashchange事件，因此您可以使用它来为您的某些页面提供类似于应用程序的功能。有关详细信息，请参阅https://github.com/quirkey/sammy/wiki/Presentations。

此外，在下面的示例中，几乎不需要使用普通链接。你可以使用按钮，li，你想要的任何ajax响应链接，只要你可以绑定到他们的点击事件。您使用的路由参数可以存储在单击元素的数据属性中，也可以存储在通过单击元素可识别的其他位置，即。在一个javascript字典对象中。触发点击事件后，您可以检索必要的路线值并使用html5推送状态，jquery-bbq-push状态，hashbanging等。

<强>概述 history.js和jquery-bbq库用于在触发ajax或页面事件时维护状态。您可以使用这些库来存储有关浏览器历史记录的信息和/或您操纵URL，以便您可以使用页面上的前进和后退按钮进行ajax调用，选项卡更改，图像浏览，以及您想要绑定历史记录日志的任何内容至。两个库都有一些类似的API用于基本用法。

<强> History.js 新的history.js库使用pushstate和popstate的html5浏览器标准，如果浏览器不支持html5 pushstate，则回退到hashchange方法。 Pushstate允许您将您的网址推送到浏览器栏=更改网址而不重新加载页面！主存储库是https://github.com/browserstate/history.js

要使用它，你（a）包括脚本文件，（b）绑定到'statechange'事件和（c）处理statechange事件，以及（d）当你wnat时触发statechange事件 - 当你的用户点击等时。

注释：每当用户按下向前或向后按钮时，状态改变事件将被触发。在bind方法/处理程序中，您将调用获取相应状态的方法。（1）方法/函数History.getState（）可用于根据您推入的页面历史记录从服务器获取数据。您可以将任何变量存储在State对象中。通常你想存储一个网址。（0）每当有人点击要跟踪历史记录的（非页面刷新）链接时，您需要填充历史记录状态。

（0）

   $("#navbar").on("click","li[data-ajax-link='true']", function(e) {
        var url = $(this).data('uri');
        var target = $(this).data('target');
        var title = $(this).data('text');
        History.pushState({ url: url, target: target }, title, url);
    });

（1）

History.Adapter.bind(window, 'statechange', function() {
       updateContent(History.getState());
});

（2）

 var updateContent = function(State) {
        var url = State.data.url;
        var $target = $(State.data.target);
        ajaxPost(url, $target);
  };

<强> BBQ

Ben Alman的图书馆即。 jquery-bbq.js使用哈希来控制浏览器历史记录。它完全符合旧版浏览器（因为hashchange就像一个html4技术）。

如果您决定更改链接的默认行为，当您单击链接时，（4）您可以拦截链接回发，阻止默认操作，并调用$ .bbq.pushstate。此pushstate方法在哈希标记之后将项目内部推入URL。（5）更改url哈希值，调用绑定到的“hashchange”事件。（5续）在hashchange事件中，你可以使用$ .bbq.getState（“paramname”）来获取散列后带有“paramname”的lastet paremeter。这很有用，因为浏览器会处理正常历史记录中的哈希值。因此，当sombody向前或向后点击时，它会加载上一个或下一个哈希状态。如果您使用它来使您的应用程序大量使用ajax，那么您将执行ajax回发以获取之前放入哈希的url。有关如何使用此问题的另一个例子，请查看我最近对JQuery BBQ: Where to store URLs?

的回答

烧烤历史样本用法

（4）

 $("a[data-custom-ajax-link='true']").click(function (e) {
    var target = $(this).data('target');
    var url = $(this).attr('href');
    $.bbq.pushState({ url: url, target: target });
    e.preventDefault();
});

（5）

$(window).bind("hashchange", function(e) {
    var url = $.bbq.getState("url");
    var $target = $($.bbq.getState("target"));
    var frame = $.bbq.getState("target");


    $.ajax({
        url: url,
        data : null,
        type: "POST",
        beforeSend: function (xhr) { xhr.setRequestHeader('X-Target', frame); },
        success: function (data) {
            $target.html(data);
        }
    });


});

请注意，我刚刚介绍了如何使用这些插件的基础知识。您可以使用这些插件来管理使用标签，链接或ajax加载的前进和后退按钮。

至于哪一个'更好'，很难说。 History.js将在〜。5年内完全成熟时成为更好的库（它仍然处于测试阶段，但它对未来是个好赌注，请注意其github网站上的大量未解决的问题和分支）。 Jquery-bbq是其3年前的另一方面，并且尚未针对jquery 1.9合规性进行更新。好消息是它们具有非常相似的实现和功能，因此在两者之间切换也不错。

History.js更具未来兼容性。看看它的API（约https://github.com/browserstate/history.js

的一半）

为了进行比较，bbq的API位于页面http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html上。除了历史部分之外，还有更多内容。

Answer 2

您无法覆盖浏览器的后退和前进按钮，出于安全考虑，这是在每个浏览器中设计的。

所有这些脚本都是改变浏览器＆＃39; document.location或document.hash，然后跟踪何时使用浏览器后退或前进按钮并获取浏览器的当前哈希状态。

不要误会我的意思，他们是很棒的剧本，但他们不会让你完全覆盖你的后退和前进按钮。

jquery.history.js VS jquery-hashchange

2 个答案:

编辑 - 2013年末