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 上的 Manipulating the Browser History 文章。

下面是一个例子，给当前 URL 添加一个参数并替换当前的历史条目：

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

History API 是一项 HTML5 功能，不幸的是 not supported on all browsers。不过有一个叫history.js的polyfill，号称可以支持所有浏览器。

更新：

您可能希望查看现有解决方案和 jQuery 插件，而不是滚动您自己的 AJAX 历史实现。看看例如在What is the best back button jQuery plugin? 问题的答案中。