jquery.history.js VS jquery-hashchange

Question

参见http://balupton.github.io/jquery-history/demo/

我被jquery.history.js吸引了

同时我发现

http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/

我认为第二个是基于JQuery的。我的意思是它不需要任何额外的插件，除了jQuery。

jquery.history.js有什么特别之处?

我应该用哪个来覆盖浏览器的后退和前进按钮?

Answer 1

EDIT - 2013年末

另一个名为"sammy.js"的哈希库也很流行。它有一个很好的客户端路由图。客户端路由结构用于处理hashchange事件，因此您可以使用它为某些页面提供类似于单个应用程序的功能。请参阅https://github.com/quirkey/sammy/wiki/Presentations了解更多细节。

同样，在下面的例子中几乎没有必要使用普通链接。你可以使用按钮，li's，任何你想要的ajax响应式链接，只要你能绑定到他们的点击事件。您使用的路由参数可能存储在已单击元素的数据属性中，也可能存储在通过已单击元素可识别的其他地方。在一个javascript字典对象中。在on-click事件触发后，你就可以检索必要的路由值，并使用html5推送状态、jquery-bbq-push状态、hashbanging等。

---

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

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

使用它，你(a)包含脚本文件，(b)绑定到'statechange'事件和(c)处理statechange事件和(d)触发statechange事件当你想-当你的用户点击等。

指出:每当用户按下前进或后退按钮时，状态改变事件就会触发。在bind方法/处理程序中，您将调用一个获取相应状态的方法。（1)方法/函数history . getstate()可用于根据您所推入的页面历史从服务器获取数据。您可以在State对象中存储任何变量。通常你想要存储一个url。(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);
  };

烧烤

Ben Alman's library ie。Jquery-bbq.js使用哈希来控制浏览器历史记录。它完全兼容旧的浏览器(因为hashchange就像html4技术)。

如果你决定改变一个链接的默认行为，当你点击一个链接，(4)你可以拦截链接回发，防止默认的动作，并调用$.bbq.pushstate。这个pushstate方法将其中的项推送到url的hash标记后面。(5) url哈希值的改变，调用一个你绑定的"hashchange"事件。在hashchange事件上，您可以使用$.bbq. getstate("paramname")来获取哈希后带有"paramname"的最后一个参数。这很有用，因为浏览器将在正常的历史记录中处理哈希值。所以当有人向前或向后点击时，它会加载上一个或下一个哈希状态。如果您正在使用此方法使应用程序大量使用ajax，那么您将执行ajax回发以获取先前放置在散列中的url。关于如何使用它的另一个示例，请参阅我最近对JQuery BBQ的回答:在哪里存储url ?

BBQ历史使用示例

(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

您不能覆盖浏览器的后退和前进按钮，这是每个浏览器出于安全原因的设计。

所有这些脚本做的就是改变浏览器的文档。位置或文件。哈希，然后跟踪何时使用浏览器后退或前进按钮，并获取浏览器的当前哈希状态。

不要误解我的意思，它们是很好的脚本，但是它们不允许你完全覆盖你的后退和前进按钮。