Question

可能重复：
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>

我将从链接中获取网址：

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

如果我在下面执行此操作，页面将被重定向：

window.location = path;

我想做这样的事情site，当你点击图片时，ajax调用将获取所请求的页面，窗口上的URL地址也将被更改，因此它有一个路径你点击了什么。

Answer 1

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

你无法更改整个网址而不重定向，而你可以做的是更改哈希。

哈希是＃符号后面的网址的一部分。这最初的目的是指导您（本地）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来 stringify ，则可以将整个对象放在那里。

有很好的JQuery库可以用它做高级的事情。

Answer 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中测试它并且运行正常。

Answer 3

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

var fragment = location.hash;

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

location.hash = "your_state_data";

Answer 4

你不能做你所要求的（并且链接的网站也不能做到这一点）。

你可以修改#符号之后的网址部分，该部分称为片段，如下所示：

window.location.hash = 'something';

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

Answer 5

这是通过URL重写实现的，而不是通过URL混淆来实现的，这是无法完成的。

如上所述，另一种方法是使用

更改主题标签

window.location.hash = "/2131/"

Answer 6

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

来完成此操作

Answer 7

如果没有重定向，您无法真正更改位置栏中的整个网址（想想安全问题！）。

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

ps。阻止链接的默认onclick重定向，例如：

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

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

7 个答案: