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

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

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

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

当前回答

如果您想更改url但不想将条目添加到浏览器历史记录中,也可以使用HTML5 replaceState:

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

这将“破坏”后退按钮功能。在某些情况下,这可能是必需的,例如图像库(您希望后退按钮返回到库索引页,而不是返回到您查看的每个图像),同时为每个图像提供自己的唯一url。

其他回答

正如Vivart和geo1701所提到的,HTML5 replaceState就是答案。但是,并非所有浏览器/版本都支持此功能。History.js包装了HTML5状态特性,并为HTML4浏览器提供了额外的支持。

在现代浏览器和HTML5中,有一种叫做pushState的窗口历史记录方法。这将更改URL并将其推送到历史记录中,而无需加载页面。

您可以这样使用它,它需要3个参数,1)状态对象2)标题和URL):

window.history.pushState({page: "another"}, "another page", "example.html");

这将更改URL,但不会重新加载页面。此外,它不会检查页面是否存在,因此如果您执行一些对URL做出反应的JavaScript代码,您可以这样处理它们。

此外,还有history.replaceState(),它做了完全相同的事情,只是它将修改当前历史,而不是创建新的历史!

此外,您还可以创建一个函数来检查history.pushState是否存在,然后执行以下操作:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

此外,您可以更改<HTML5浏览器的#,这不会重新加载页面。这是Angular根据标签进行SPA的方法。。。

更改#非常简单,比如:

window.location.hash = "example";

你可以这样检测:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

注意:如果你使用的是HTML5浏览器,那么你应该忽略这个答案。从其他答案中可以看出,这现在是可能的。

在不重新加载页面的情况下,无法在浏览器中修改URL。URL表示最后加载的页面。如果您更改它(document.location),它将重新加载页面。

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

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

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

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

在HTML5之前,我们可以使用:

parent.location.hash = "hello";

and:

window.location.replace("http:www.example.com");

此方法将重新加载页面,但HTML5引入了不应重新加载页面的history.pushState(page,caption,replace_url)。