如何在不重新加载的情况下动态更改 URL？ [复制]答案

【问题标题】：How to dynamically change URL without reloading? [duplicate]如何在不重新加载的情况下动态更改 URL？ [复制]
【发布时间】：2012-08-09 14:20:40
【问题描述】：

好的，这就是我正在尝试做的（我认为 Google 主要也是这样做的）：

场景 A：

在页面/Main_Page 假设有 3 个部分。当用户点击 A 部分的“链接”时，section A 的内容通过 AJAX 加载并嵌入到页面中。

场景 B：

当/Main_Page/Section_A 被加载时，我们实际上会转到同一个页面（如场景 A 中） - /Main_Page 并通过 AJAX 加载 Section A - 和以前一样。

问题：

我们有 2 个相同的结果页面，但 URL 不同（在第一种情况下，它只是 /Main_Page，而在第二种情况下，它将是 /Main_Page/Section_A）。

我想做的事：

在场景 A 中，通过 AJAX 加载 Section A 后，我应该如何做到这一点，以便出现的 URL（在浏览器地址栏中）为 /Main_Page/Section_A（或其他任何内容），而无需任何重定向、页面重新加载等？

【问题讨论】：

你在找History API，这里是demo
也许您正在寻找 URL 中的井号标签（例如 twitter.com/#!/search-home）。谷歌有一个很好的教程如何抓取这些页面：support.google.com/webmasters/bin/…

标签： javascript html ajax

【解决方案1】：

您的问题可以通过实现History API 来解决，尤其是通过使用pushState() 方法。我推荐reading about it in MDN。还有一个名为 History.js 的一体化解决方案，它将帮助您轻松实现 x-browser（如果浏览器不支持它，它将回退到 URL 哈希 #）。

这是一个例子：

history.pushState('', 'New Page Title', newHREF);

不够兴奋？这是一个demo，它将鼓励您实施它。

【讨论】：

这绝对看起来很有希望；我已经开始研究它，它很可能是我将要使用的（history.js 方法似乎更多 viable 让它快速运行）。非常感谢，伙计！ :-)
作为后续行动，只是为了让您知道：它的工作非常出色！ :-)
@Jleagle 是的。但是给出的关于history.js 的例子就像一个魅力——所以，基本上不需要任何其他例子。 ;-)
@Jleagle，你是对的 :) 感谢您告诉我，我已经用不同的链接更新了链接。
@Dr.Kameleon，感谢您的跟进。很高兴看到像你这样的问题海报。明确的问题，赞赏（不一定赞成/接受），跟进。

【解决方案2】：

我刚刚找到了一个教程，它对我有用，

$('a').click(function(){
var value = $(this).attr('id');
window.location.hash = value; // it appends id to url without refresh
});


$(window).bind('hashchange' function() {
    var newhash = window.location.hash.substring(1) // it gets id of clicked element
    // use load function of jquery to do the necessary...
});

我从上面得到了上面的代码 http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/

【讨论】：