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

大兔子大兔子 提交于 2020-01-06 16:10:08

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

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

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

ps我不是在谈论window.location.hash等。 如果上述内容存在,则此问题的答案将不成立。


#1楼

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

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

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

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

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

有关基本操作方法,请参阅我的答案, 无需重新加载页面即可修改URL


#2楼

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

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

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


#3楼

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

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!