见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 有什么特别之处？比散列变化？。
我应该使用哪个来覆盖浏览器的后退和前进按钮？
【问题讨论】：
标签： jquery html history.js hashchange
另一个名为“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。它不仅仅是历史部分。
【讨论】：
您不能覆盖浏览器的后退和前进按钮，这是出于安全原因在每个浏览器中设计的。
所有这些脚本所做的只是更改浏览器的 document.location 或 document.hash，然后跟踪浏览器的后退或前进按钮何时被使用，并获取浏览器的当前哈希状态。
不要误会我的意思，它们是很棒的脚本，但它们不允许您完全覆盖后退和前进按钮。
【讨论】：