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

2020/09/22 21:20 · javascript ·  · 0评论

我梦ed以求的是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";
}
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);
本文地址:http://javascript.askforanswer.com/shiyongxindeurlgengxindizhilanerbusanliehuozhongxinjiazaiyemian.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!