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

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

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

我是疯了还是有办法做到这一点（在Chrome）？

附注：我不是在谈论window.location.hash等人。如果上面存在这个问题的答案将是不真实的。

536547 次浏览
小开
最佳答案

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

这是我读到的原始文章（发布于2010年7月10日）：HTML5：在不刷新页面的情况下更改浏览器URL。

为了更深入地了解pushState/replace eState/popstate（又名HTML5历史API）查看MDN文档。

太长别读，你可以这样做：

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

请参阅我对修改URL而不重新加载页面的回答，了解基本操作方法。

小开

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

document.location.hash = 'lookAtMeNow';

更改完整的URL。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');

现在尝试在控制台中运行这些！

小开

更新David对甚至检测不支持Pushstate的浏览器的回答：

if (history.pushState) {
window.history.pushState(stateObj, "title", "url");
} else {
window.history.replaceState(stateObj, "title**", 'url');
// ** It seems that current browsers other than Safari don't support pushState
// title attribute. We can achieve the same thing by setting it in JS.
document.title = "Title";
}

stateObj状态对象

state对象是一个JavaScript对象，它与传递给replace eState方法的历史条目相关联。状态对象可以为空。

标题

大多数浏览器目前忽略此参数，尽管它们将来可能会使用它。在此处传递空字符串应该可以防止将来对方法进行更改。或者，您可以传递状态的短标题。

url可选

历史条目的URL。新URL必须与当前URL具有相同的来源；否则replace eState会引发异常。

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

提交答案