如何在不重新加载页面的情况下修改 URL？

javascript html url url-rewriting friendly-url

2022-08-29 21:50:15

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

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

我只需要更改域后面的部分，因此我并没有违反跨域策略。

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

答案 1

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

答案 2

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

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

从这里阅读更多相关信息