协慌网

登录 贡献 社区

使用新的 URL 更新地址栏,而不散列或重新加载页面

我或者梦见 chrome(开发者通道)实现了一种无需重新加载页面即可通过 javascript(地址而不是域)更新地址栏的方法,或者他们确实做到了这一点。

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

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

ps 我不是在谈论 window.location.hash 等。如果以上存在,则该问题的答案将是不正确的。

答案

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

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

要更深入地了解 pushState / replaceState / popstate(又称 HTML5 历史 API),请参阅 MDN 文档

TL; DR,您可以执行以下操作:

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');

立即尝试在控制台中运行它们!

更新至 Davids 答案,甚至可以检测不支持 pushstate 的浏览器:

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