Javascript 在将其放入历史记录之前更改 url 参数

Question

我正在使用数据表 JQuery 插件。我将它与 AJAX 和分页（服务器端）一起使用。每行都包含一个指向该记录的详细视图的链接。单击该链接然后单击后退按钮时，我想返回到上一页。 （注意：不能使用数据表自身的状态保存）。

如果您可以在将当前 url 放入历史记录之前添加 url 参数，则可以实现此目的。

这可以做到吗？纯 JS 或 JQuery 并不重要。

（注意：我是做这类事情的新手，已经阅读过有关使用 # 的内容，但从未这样做过，所以如果您建议，请提供一个适用于我的问题的示例）

编辑：

JQuery 插件 bbq 的非常基本指南 (http://benalman.com/projects/jquery-bbq-plugin/)

假设 URL 的哈希值为 #a=2&b=test，您可以通过以下方式获取值：

//true = optional converts 2 to an integer, false to boolean,...
var a = $.bbq.getState('a',true);

您可以通过以下方式更改/添加值：

var hash = "a=3&b=hello";
$.bbq.pushState(hash);

pushState如果 hashchange 事件被绑定，则触发该事件。要绑定事件，请在 doucment.ready 函数中执行以下操作：

// called when # part of URL is modified
$(window).bind( 'hashchange', function( event ) {
    var hash = event.fragment; // full hash as string
    var a = event.getState('a', true ); // value for a
    // here do meaningful action like an AJAX request using the hash parameters    
});

Answer 1

是的，HTML5 History API 可以让您做到这一点。查看 MDN 上的操纵浏览器历史记录文章。

下面是一个向当前 URL 添加参数并替换当前历史记录条目的示例：

 var newURL = location.href + (location.search ? "&" : "?") + "myParameter=myValue";
 history.replaceState({}, '', newURL);

History API 是一项 HTML5 功能，不幸的是 并非所有浏览器都支持。然而，有一个名为 history.js 的 polyfill，声称可以为所有浏览器带来支持。

更新：

您可能想要查看现有的解决方案和 jQuery 插件，而不是滚动自己的 AJAX 历史记录实现。看看什么是最好的后退按钮 jQuery 的答案插件？ 问题。