有没有一种方法可以在不重新加载页面的情况下修改当前页面的URL?

如果可能,我想访问#哈希之前的部分。

我只需要更改域之后的部分,所以我不会违反跨域策略。

 window.location.href = "www.mysite.com/page2.php";  // this reloads

当前回答

可以添加定位标记。我在我的网站上使用这个,这样我就可以通过Google Analytics跟踪人们在页面上访问的内容。

我只是添加了一个锚标记,然后添加了我要跟踪的页面部分:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

其他回答

下面是在不重新加载页面的情况下更改URL的功能。它仅支持HTML5。

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

这是我的解决方案(newUrl是您要用当前URL替换的新URL):

history.pushState({}, null, newUrl);

这现在可以在Chrome、Safari、Firefox 4+和Internet Explorer 10pp4+中完成!

有关详细信息,请参阅此问题的答案:使用新的URL更新地址栏,而无需哈希或重新加载页面

例子:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

然后,您可以使用window.onpopstate检测后退/前进按钮导航:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

有关操纵浏览器历史的更深入了解,请参阅MDN文章。

正如Thomas Stjernegaard Jeppesen所指出的,当用户浏览Ajax链接和应用程序时,您可以使用History.js修改URL参数。

距离这个答案已经过去了将近一年,History.js不断发展,并变得更加稳定和跨浏览器。现在,它可以用于管理兼容HTML5的历史状态,也可以用于许多仅支持HTML4的浏览器。在本演示中,您可以看到它如何工作的示例(以及如何尝试其功能和限制)。

如果您在如何使用和实现这个库方面需要任何帮助,我建议您查看演示页面的源代码:您会发现它非常容易做到。

最后,要全面解释使用哈希(和hashbangs)的问题,请查看Benjamin Lupton的链接。

这段代码对我很有用。我在ajax应用程序中使用了它。

history.pushState({ foo: 'bar' }, '', '/bank');

一旦使用ajax将页面加载到ID中,它会自动更改浏览器url,而无需重新加载页面。

这是下面的ajax函数。

function showData(){
    $.ajax({
      type: "POST",
      url: "Bank.php", 
      data: {}, 
      success: function(html){          
        $("#viewpage").html(html).show();
        $("#viewpage").css("margin-left","0px");
      }
    });
  }

示例:从任何页面或控制器(如“Dashboard”),当我单击银行时,它会使用ajax代码加载银行列表,而无需重新加载页面。此时,浏览器URL将不会更改。

history.pushState({ foo: 'bar' }, '', '/bank');

但是当我在ajax中使用这段代码时,它会在不重新加载页面的情况下更改浏览器url。下面是完整的ajax代码。

function showData(){
        $.ajax({
          type: "POST",
          url: "Bank.php", 
          data: {}, 
          success: function(html){          
            $("#viewpage").html(html).show();
            $("#viewpage").css("margin-left","0px");
            history.pushState({ foo: 'bar' }, '', '/bank');
          }
        });
      }