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

编辑 - 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

本阿尔曼的图书馆即.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:存储URL的位置？

烧烤历史样本用法

(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

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

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

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