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

Question

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

但是,我找不到我认为我读过的文章.

我是疯了还是有办法做到这一点(在Chrome中)？

ps我不是在谈论window.location.hash,et al.如果上述情况存在,那么这个问题的答案将是不真实的.

Answer 1

您现在可以在大多数"现代"浏览器中执行此操作!

这是我读过的原始文章(2010年7月10日发布):HTML5:更改浏览器URL而不刷新页面.

有关pushState/replaceState/popstate(也称为HTML5 History API)的更深入研究,请参阅MDN文档.

TL; DR,你可以这样做:

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

请参阅我的修改URL的答案,而不重新加载页面以获取基本操作方法.

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

更新到戴维斯的答案甚至检测到浏览器不支持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);