jquery：更改URL地址而不重定向？ [复制]答案

【问题标题】：jquery: change the URL address without redirecting? [duplicate]jquery：更改URL地址而不重定向？ [复制]
【发布时间】：2011-09-22 15:18:01
【问题描述】：

可能重复：
Modify Address Bar URL in AJAX App to Match Current State

如何在不重定向页面的情况下更改 URL 地址？

例如，当我点击下面的这个链接时：

<a href="http://mysite.com/projects/article-1" class="get-article">link</a>

我将从链接中获取 URL：

var path = object.attr('href');

如果我在下面这样做，页面将被重定向：

window.location = path;

我想做这样的事情site，当您单击图像时，ajax 调用将获取请求的页面，并且窗口上的 URL 地址也将被更改，因此它具有您想要的路径点击。

【问题讨论】：

请注意，gmail 是您正在寻找的更好的示例
另一个可能的重复：stackoverflow.com/questions/824349/…

标签： jquery ajax redirect location

【解决方案1】：

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

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

hash 是 URL 中 # 符号之后的部分。这最初旨在将您（本地）引导到 HTML 文档的各个部分，但您可以通过 javascript 阅读和修改它以使用它有点像全局变量。

如果应用得当，这种技术在两个方面很有用：

浏览器历史记录会记住您执行的每个不同步骤（因为 url+hash 已更改）
您可以拥有一个地址，该地址不仅可以链接到特定的 html 文档，还可以为您的 javascript 提供有关该做什么的线索。这意味着您最终会指向网络应用中的一个状态。

要更改哈希值，您可以：

document.location.hash = "show_picture";

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

window.onhashchange = function(){
    var what_to_do = document.location.hash;    
    if (what_to_do=="#show_picture")
        show_picture();
}

当然，哈希只是一个字符串，所以你可以用它做你喜欢的事情。例如，如果您使用 JSON 对其进行 stringify，则可以将整个对象放在那里。

有非常好的 JQuery 库可以用它来做一些高级的事情。

【讨论】：

Brendan 的方法有效，前提是您使用相同的域。
Chrome 和 Safari 在 2010 年引入了对 history.pushState() 的支持，因此即使编写时这个答案也不太正确。 IE 是最后一个不支持history.pushState() 的主流浏览器，预计 IE 10 会改变这一点。

【解决方案2】：

请看这里 - http://my.opera.com/community/forums/topic.dml?id=1319992&t=1331393279&page=1#comment11751402

基本上：

history.pushState('data', '', 'http://your-domain/path');

您可以操纵历史对象来完成这项工作。

它只适用于同一个域，但既然您对使用哈希标记方法感到满意，那应该没关系。

显然需要进行跨浏览器测试，但由于它已发布在 Opera 论坛上，我可以肯定它可以在 Opera 中运行，我刚刚在 Chrome 中对其进行了测试，它运行良好。

【讨论】：

IE
如果您不想实际更改历史记录而只更改 URL，您应该使用 history.replaceState('data', '', 'your-domain/path');而是
来自HTML5 API
感谢分享知识；）

【解决方案3】：

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

var fragment = location.hash;

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

location.hash = "your_state_data";

【讨论】：

【解决方案4】：

您不能按照您的要求去做（链接的网站也不完全这样做）。

您可以，但是，修改#符号之后的部分url，称为片段，如下所示：

window.location.hash = 'something';

片段不会发送到服务器（例如，Google 本身无法区分 http://www.google.com/ 和 http://www.google.com/#something），但可以通过您页面上的 Javascript 读取它们.反过来，这个 Javascript 可以根据片段的值决定执行不同的 AJAX 请求，这就是您链接到的站点可能执行的方式。

【讨论】：

【解决方案5】：

这是通过 URL 重写来实现的，而不是通过 URL 混淆，这是做不到的。

如前所述，另一种方法是更改主题标签，使用

window.location.hash = "/2131/"

【讨论】：

【解决方案6】：

不，因为这会打开网络钓鱼的闸门。您可以更改的唯一 URI 部分是片段（# 之后的所有内容）。你可以通过设置window.location.hash来做到这一点。

【讨论】：

【解决方案7】：

如果不进行重定向，您无法真正更改地址栏中的整个 URL（想想安全问题！）。

但是，您可以更改 hash 部分（# 之后的内容）并阅读：location.hash

ps.通过以下方式阻止默认的onclick 重定向链接：

$("#link").bind("click",function(e){
  doRedirectFunction();
  e.preventDefault();
})

【讨论】：