18

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

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

4

2 回答 2

36

编辑 - 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) 在您 wnat 时触发 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);
  };

烧烤

本·阿尔曼的图书馆，即。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：在哪里存储 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上。它不仅仅是历史部分。

于 2013-06-14T01:13:46.210 回答
2

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

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

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

于 2013-06-10T09:26:46.963 回答