您可以在应用程序的任何位置使用这个美丽而简单的功能。

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', title, new_url);
    
}

您不仅可以编辑URL，还可以同时更新标题。

您可以在应用程序的任何位置使用这个美丽而简单的功能。

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', title, new_url);
    
}

您不仅可以编辑URL，还可以同时更新标题。

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

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

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

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

这是我的解决方案（newUrl是您要用当前URL替换的新URL）：

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

下面是在不重新加载页面的情况下更改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');

这现在可以在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文章。