Question

我曾经梦想过chrome（开发者频道）实现了一种通过javascript（路径，而不是域名）更新地址栏的方法，而无需重新加载页面，或者他们确实已经这样做了。

但是，我找不到我认为我读过的文章。

我是疯了还是有办法（在Chrome中）？

P.S。我不是在谈论window.location.hash，et al。如果上述存在the answer to this question将是不真实的。

Answer 1

现在，您可以在大多数“现代”浏览器中执行此操作！

以下是我读过的原始文章（2010年7月10日发布）：HTML5: Changing the browser-URL without refreshing page。

有关pushState / replaceState / popstate（又称HTML5历史记录API）see the MDN docs的更深入研究。

TL; DR，你可以这样做：

window.history.pushState("object or string", "Title", "/new-url");

请参阅我对Modify the URL without reloading the page的回答，了解基本的操作方法。

Answer 2

仅更改哈希 - 旧浏览器之后的内容

document.location.hash = 'lookAtMeNow';

更改完整网址。 Chrome，Firefox，IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

以上内容将在历史记录中添加一个新条目，以便您可以按“返回”按钮转到上一个状态。要在不添加新条目的情况下更改URL，请使用

history.replaceState('data to be passed', 'Title of the page', '/test');

现在尝试在控制台中运行它们！

Answer 3

更新到Davids甚至检测到浏览器不支持pushstate：

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}

Answer 4

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);

使用新URL更新地址栏，不使用哈希或重新加载页面

4 个答案: