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

Question

可能重复:
修改AJAX应用程序中的地址栏URL以匹配当前状态

如何在不重定向页面的情况下更改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的一部分.这最初的目的是将您(本地)引导到HTML文档的各个部分,但您可以通过javascript读取和修改它,使其有点像全局变量.

如果应用得当,这种技术有两种用途:

1. 浏览器历史记录将记住您采取的每个不同步骤(因为更改了网址+哈希)
2. 你可以拥有一个地址,不仅可以链接到特定的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

请参阅此处 - 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";