jquery.history.js VS jquery-hashchange

Posted 2023-04-13

【中文标题】jquery.history.js VS jquery-hashchange

【英文标题】：

【发布时间】：2013-06-03 13:29:16

【问题描述】：

见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 有什么特别之处？比散列变化？。

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

【参考方案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 允许您将 url 推送到浏览器栏 = 更改 url 而无需重新加载页面！主仓库是https://github.com/browserstate/history.js

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

注意事项： 每当用户按下前进或后退按钮时，都会触发状态更改事件。在绑定方法/处理程序中，您将调用一个获取相应状态的方法。 (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 的图书馆，即。 jquery-bbq.js 使用哈希来控制浏览器历史。它完全兼容旧版浏览器（因为 hashchange 就像一种 html4 技术）。

如果你决定改变一个链接的默认行为，当你点击一个链接时，(4)你可以拦截链接回发，阻止默认动作，并调用$.bbq.pushstate。这个 pushstate 方法在哈希标记之后将里面的项目推送到 url 中。 (5) url 哈希的这种更改调用了您绑定的“hashchange”事件。 （5 续）在 hashchange 事件中，您可以使用 $.bbq.getState("paramname") 在哈希后获取带有“paramname”的 lastet 参数。这很有用，因为浏览器将处理正常历史记录中的哈希值。所以当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。它不仅仅是历史部分。

【讨论】：

@ucefkh 你能和我们分享你的解决方案吗？

【参考方案2】：

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

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

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