jquery.history.js VS jquery-hashchange

jquery.history.js VS jquery-hashchange

提问by Kuttan Sujith

See http://balupton.github.io/jquery-history/demo/

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

I was attracted with jquery.history.js

我被 jquery.history.js 所吸引

mean while I found

意思是我发现

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

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

I think the second one is just based on JQuery. I mean it don't need any additional plugin than jQuery.

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

What is special in jquery.history.js? than hash change?.

jquery.history.js 有什么特别之处？比哈希变化？。

Which should I use to override my browsers back and forward buttons ?

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

回答by monkeyhouse

EDIT - Late 2013

编辑 - 2013 年末

Another hash library called "sammy.js" is popular as well. It has a nice client side routing map. The client side routing structure is used to handle the hashchange events, so that you can use it to provide single-app-like functionality to some of your pages. See https://github.com/quirkey/sammy/wiki/Presentationsfor a bit of detail.

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

Also, its hardly necessary to use normal links is done in the examples below. You can use buttons, li's, whatever you want as as ajax responsive links, as long as you can bind to their on click event. The routing parameters you use may be stored in the data attributes of the clicked elements or otherwise somewhere else identifiable through the clicked element, ie. in a javascript dictionary object. After the on-click event fires, then you can then retrieve the necessary route values and use the html5 push state, jquery-bbq-push state, hashbanging, etc.

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

---

---

OverviewThe history.js and jquery-bbq libraries are used to maintain state when you fire ajax or on page events. You use these libraries to store information about the browser history &/or you manipuate the url so that you can use the forward and back buttons on pages for ajax calls, tab changes, image browsing, really anything you want to bind the history log to. Both libraries have somewhat similar APIs for basic usage.

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

History.jsThe new history.js library uses the html5 browser standards for pushstate and popstate and falls back on the hashchange approach if the browser doesn't support html5 pushstate. Pushstate allows you to push your url to the browser bar = change the url without reloading the page! The main repository is https://github.com/browserstate/history.js

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

To use it, you (a) include the script files, (b) bind to the 'statechange' event and (c) handle the statechange event and (d)trigger the statechange event when you wnat - when your user clicks etc.

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

notes: Whenever the user presses the forwards or backwards button the state change event will fire. Inside the bind method/handler, you will call a method that gets the correponding state. (1) The method/function History.getState() can be used to get data from your server based on the page history you've pushed in. You can store any variables in the State object. usually you want to store a url. (0) You need to populate the History state each time somebody clicks on a (non-page refreshing) link for which you want to track the history.

注意：每当用户按下前进或后退按钮时，状态更改事件就会触发。在绑定方法/处理程序中，您将调用一个获取相应状态的方法。(1) 方法/函数 History.getState() 可用于根据您推送的页面历史记录从您的服务器获取数据。您可以在 State 对象中存储任何变量。通常你想存储一个 url。(0) 每次有人单击要跟踪其历史记录的（非页面刷新）链接时，您都需要填充历史记录状态。

(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)

(1)

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

(2)

(2)

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

BBQ

烧烤

Ben Alman's library ie. jquery-bbq.js uses hashes to control the browser history. It is fully compliant with older browsers (as hashchange is like an html4 tech).

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

If you decide to change the default behavior of a link, when you click on a link, (4) you can intercept the link postback, prevent the default action, and call $.bbq.pushstate. This pushstate method pushes the items inside into the url after a hash mark. (5) This changing of the url hash, calls a 'hashchange' event to which you bind. (5 cont'd) on the hashchange event, you get use $.bbq.getState("paramname") to get the lastet paremeter with "paramname" after the hash. This is usefull because the browser will treat the hashes in the normal history. So when sombody clicks forwards or backwards, it loads the previous or next hash state. If you are using this to make your application use ajax heavily, then you would do an ajax postback to get the url that was previously placed into the hash. For another exapmle of how to use this, look at my recent answer to JQuery BBQ: Where to store URLs?

如果你决定改变一个链接的默认行为，当你点击一个链接时，（4）你可以拦截链接回发，阻止默认操作，并调用 $.bbq.pushstate。这个 pushstate 方法在哈希标记后将里面的项目推送到 url 中。(5) url 散列的这种更改会调用您绑定的“hashchange”事件。(5 cont'd) 在 hashchange 事件中，您可以使用 $.bbq.getState("paramname") 来获取哈希后带有 "paramname" 的 lastet 参数。这很有用，因为浏览器将处理正常历史记录中的哈希值。因此，当有人向前或向后单击时，它会加载上一个或下一个哈希状态。如果您使用它来使您的应用程序大量使用 ajax，那么您将执行 ajax 回发以获取先前放入哈希中的 url。JQuery BBQ：在哪里存储 URL？

BBQ History Sample Usage

烧烤历史示例用法

(4)

(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)

(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);
        }
    });


});

Note that I've just included the basics of how you could use these plugins. You can use these plugins to manage use of the forward and back buttons with tabs, links, or ajax loads.

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

As far as which one is 'better', its hard to say. History.js will be the better library when it is fully mature in ~.5 years (its still in beta, but its a good bet for the future, note the large number of open issues and branches on its github site). Jquery-bbq is on the other side of the spectrum in that its 3 years old and hasn't been updated for jquery 1.9 compliance. The good news is that they have a very similar implementation and features so its not too bad to switch between either.

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

History.js is a bit more future compatible. Look at its API (about half way down on https://github.com/browserstate/history.js

History.js 在未来更兼容。看看它的 API（大约一半在https://github.com/browserstate/history.js

For comparison, the API of bbq is on the page http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html. There's a bit more to it than just the history portion.

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

回答by KaraokeStu

You cannot override the browser's back and forward buttons, and this is by design within each browser for security reasons.

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

All these scripts do is change the browsers' document.location or document.hash, then track when the browser back or forward buttons are used and grab the current hash state of the browser.

所有这些脚本所做的是更改浏览器的 document.location 或 document.hash，然后跟踪浏览器的后退或前进按钮何时被使用，并获取浏览器的当前散列状态。

Don't get me wrong, they are great scripts, but they will not allow you to override your back and forward buttons fully.

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