有没有办法在不刷新页面的情况下更改浏览器的地址栏？

Question

我正在开发一个网络应用程序。在其中我有一个名为类别的部分，每当用户点击其中一个类别时，更新面板就会加载相应的内容。

用户点击类别后，我想从

更改浏览器的地址栏网址

www.mysite.com/products 

类似

www.mysite.com/products/{selectedCat} 

没有刷新页面。
我可以使用某种JavaScript API来实现这一目标吗？

Answer 1

使用HTML5，您可以修改网址而无需重新加载：

如果您想在浏览器的历史记录中发布新帖子（即后退按钮可以使用）

window.history.pushState('Object', 'Title', '/new-url');

如果您只想更改网址而无法返回

window.history.replaceState('Object', 'Title', '/another-new-url');

该对象可用于ajax导航：

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

在此处阅读更多内容：http://www.w3.org/TR/html5-author/history.html

后备解决方案：https://github.com/browserstate/history.js

Answer 2

添加人们已经说过的内容，编辑window.location.hash属性以匹配你在onclick函数中想要的URL。

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name

Answer 3

我认为，出于安全考虑，不允许直接将地址栏操纵到完全不同的网址而不移动到该网址，如果您对此感到满意

www.mysite.com/products /＃{selectedCat}

即。在同一页面中的锚式样式链接然后查看现在大多数JavaScript库中存在的各种历史/“后退按钮”脚本。

提及更新面板让我猜你正在使用asp.net，在这种情况下asp.net ajax历史记录控件是一个很好的起点

Answer 4

我不认为这是可能的（至少改为完全不同的地址），因为它会对地址栏造成不直观的误用，并可能促进网络钓鱼攻击。

Answer 5

这不能像你说的那样完成。 somej.net建议的方法是你能得到的最接近的方法。这实际上是AJAX时代的常见做法。即便是Gmail也会使用此功能。

Answer 6

  

“window.location.hash”

按照sanchothefat的建议，应该是这样做的唯一方法。因为我看过这个功能的所有地方，所以一直都是在URL中的＃。