jQuery的：更改URL地址而不重定向？

Question

如何在不重定向页面的情况下更改URL地址？例如，当我单击下面的链接时：<a href="http://mysite.com/projects/article-1" class="get-article">link</a>我将从链接中获取URL：var path = object.attr('href');如果我在下面这样做，页面将被重定向：window.location = path;我想做一个类似本网站的操作，当您单击图像时，ajax调用将获取请求的页面，并且窗口上的URL地址也将更改，因此它具有您单击的路径。

Answer 1

注意：history.pushState()现在受支持-请参阅其他答案。

您不能在不重定向的情况下更改整个url，而是可以更改hash。

该散列是＃符号后进入的URL的一部分。最初的目的是将您（本地）定向到HTML文档的各个部分，但是您可以通过javascript读取和修改它，以使其像全局变量一样使用。

如果应用得当，此技术可通过两种方式使用：

浏览器历史记录将记住您执行的每个不同步骤（因为url + hash更改了）

您可以有一个地址，该地址不仅链接到特定的html文档，而且还为您的javascript提供了有关操作的线索。这意味着您最终指向了Web应用程序内的状态。

要更改哈希，您可以执行以下操作：

document.location.hash = "show_picture";

要监视哈希更改，您必须执行以下操作：

window.onhashchange = function(){

    var what_to_do = document.location.hash;    

    if (what_to_do=="#show_picture")

        show_picture();

}

当然，哈希只是一个字符串，因此您可以使用它做几乎所有的事情。例如，如果您使用JSON对其进行字符串化，则可以将整个对象放在其中。

有非常好的JQuery库可以执行高级操作。

Answer 2

该站点利用了网址的“片段”部分：“＃”之后的内容。浏览器不会将它作为GET请求的一部分发送到服务器，但可以用于存储页面状态。因此，是的，您可以更改片段而不会导致页面刷新或重新加载。页面加载后，您的JavaScript会读取此片段并适当地更新页面内容，并根据需要通过Ajax请求从服务器获取数据。要读取js中的片段：

var fragment = location.hash;

但请注意，此值的开头将包含“＃”字符。设置片段：

location.hash = "your_state_data";