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 。
如果使用得当,这种技术在两个方面是有用的:
- 浏览器的历史将记住你所采取的每一个不同的步骤(因为URL +哈希值改变)
- 你可以有一个地址,不仅链接到一个特定的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。 防止链接的默认onclick
redirect通过像这样的东西:
$("#link").bind("click",function(e){ doRedirectFunction(); e.preventDefault(); })