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

Question

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

如果您可以在将当前 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 在绑定(bind)时触发 hashchange 事件。要绑定(bind)事件，请在 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让您能够做到这一点。查看Manipulating the Browser History MDN 上的文章。

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

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

历史 API 是一项 HTML5 功能，不幸的是 not supported on all browsers 。然而，有一个名为history.js的polyfill ，声称为所有浏览器提供支持。

更新:

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