jquery:更改URL地址而不redirect?

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

如何在不redirect页面的情况下更改URL地址?

例如,当我点击下面的这个链接:

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

我将从链接中获取URL:

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

如果我这样做,页面将被redirect:

 window.location = path; 

我想做一些类似于这个网站的东西,当你点击图片时,ajax调用将获取请求的页面,并且窗口上的URL地址也将被改变,这样它就有了一个你点击的path。

注意:现在支持history.pushState() – 查看其他答案。

不能改变整个url而不redirect,你可以做的是改变哈希值

散列是#符号之后的URL的一部分。 最初的目的是引导你(本地)到你的HTML文档的各个部分,但是你可以通过JavaScript来读取和修改它,使它有点像全局variables


如果使用得当,这种技术在两个方面是有用的:

  1. 浏览器的历史将记住你所采取的每一个不同的步骤(因为URL +哈希值改变)
  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(); } 

当然,哈希只是一个string,所以你可以做很多你喜欢的东西。 例如,如果您使用JSON将其串化,则可以将整个对象放在那里。

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

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

主要有:

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

你可以操纵历史对象来完成这个工作。

它只能在同一个域上工作,但是由于您对使用散列标签方法感到满意,所以这不重要。

很明显,需要跨浏览器testing,但是因为这是张贴在Opera论坛上,我很安全地认为它将在Opera中工作,我只是在Chrome中testing它,它工作正常。

该网站使用url的“片段”部分:“#”之后的内容。 这不是作为GET请求的一部分被浏览器发送到服务器,而是可以用来存储页面状态。 所以是的,你可以改变片段,而不会导致页面刷新或重新加载。 当页面加载时,你的JavaScript读取这个片段,并适当地更新页面内容,根据需要通过ajax请求从服务器获取数据。 要阅读js中的片段:

 var fragment = location.hash; 

但是请注意,这个值在开始时会包含“#”字符。 要设置片段:

 location.hash = "your_state_data"; 

你不能做你所要求的(而且链接的网站也没有做到这一点)。

但是,您可以#符号之后修改url部分,这就是所谓的片段 ,如下所示:

 window.location.hash = 'something'; 

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

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

如前所述,另一种方式是通过改变hashtag

 window.location.hash = "/2131/" 

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

如果不进行redirect(想到安全问题),则无法在地址栏中更改整个URL。

但是你可以改变hash部分( #后面的是什么)并阅读: location.hash

PS。 防止链接的默认onclickredirect通过像这样的东西:

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