小编典典

jQuery的:更改URL地址而不重定向?[重复]

ajax

如何在不重定向页面的情况下更改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地址也将被更改,因此它具有用于单击的路径。


阅读 440

收藏
2020-07-26

共1个答案

小编典典

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

不能 更改整个URL而无需重定向,您可以做的是更改 hash

散列
是#符号后进入的URL的一部分。最初的目的是将您(本地)定向到HTML文档的各个部分,但是您可以通过javascript读取和修改它,以使其_像全局变量一样_ 使用。


如果应用得当,此技术可通过两种方式使用:

  1. 浏览器历史记录将记住您执行的每个不同步骤(因为url + hash更改了)
  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库可以执行高级操作。

2020-07-26