jquery:更改URL地址而不重定向? [复制]
Posted
技术标签:
【中文标题】jquery:更改URL地址而不重定向? [复制]【英文标题】:jquery: change the URL address without redirecting? [duplicate] 【发布时间】: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 是您正在寻找的更好的示例 另一个可能的重复:***.com/questions/824349/… 【参考方案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();
)
【讨论】:
以上是关于jquery:更改URL地址而不重定向? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
PayPal Checkout JavaScript:更改货币而不重定向或刷新页面
当锚标记仅触发 jQuery 操作而不重定向用户时,替代 <a href="#">?