Question

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

2009-05-05

2106333

javascript html url url-rewriting friendly-url

有没有办法可以修改当前页面的 URL，而无需重新加载页面？

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

我只需要更改域名之后的部分，因此这并不违反跨域政策。

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

Answer 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.addEventListener 来检测后退/前进按钮导航：

window.addEventListener("popstate", (e) => {
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
});

有关如何更深入地了解如何操作浏览器历史记录，请参阅这篇 MDN 文章。

Answer 2

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

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

从此处了解更多信息

Answer 3

如果您想更改网址但又不想将条目添加到浏览器历史记录中，您也可以使用 HTML5 replaceState ：

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

这会“破坏”后退按钮的功能。在某些情况下可能需要这样做，例如图片库（您希望后退按钮返回到图库索引页，而不是逐一浏览您查看过的每个图片），同时为每个图片提供自己独特的网址。