修改 URL 而不重新加载页面

有没有办法在不重新加载页面的情况下修改当前页面的 URL？

如果可能的话，我想访问 #hash 之前的部分。

我只需要在域之后更改部分，因此它不像我违反了跨域策略。

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

现在可以在 Chrome，Safari，FF4 + 和 IE10pp4 + 中完成！

有关详细信息，请参阅此问题的答案：使用新 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 文章。

HTML5 引入了history.pushState()和history.replaceState()方法，允许您分别添加和修改历史条目。

window.history.pushState('page2', 'Title', '/page2.php');

从这里了解更多相关信息

注意：如果您使用的是HTML5浏览器，则应忽略此答案。现在可以在其他答案中看到这一点。

如果不重新加载页面，则无法在浏览器中修改URL 。 URL 表示上次加载的页面的内容。如果你改变它（ document.location ），那么它将重新加载页面。

一个显而易见的原因是，您在www.mysite.com上写了一个看起来像银行登录页面的网站。然后，您将浏览器网址栏更改为www.mybank.com 。用户将完全不知道他们真的在看www.mysite.com 。