有没有办法改变浏览器的地址栏，而不刷新页面？

我正在开发一个Web应用程序。 其中我有一个类别的部分，每次用户点击其中一个类别更新面板加载适当的内容。

用户点击类别后，我想将浏览器的地址栏url从“www.mysite.com/products”更改为“www.mysite.com/products/{selectedCat}”，而无需刷新页面。

有什么样的Javascript API可以用来实现这个吗？

Answer 1

使用HTML5，您可以在不重新加载的情况下修改url：

如果您想在浏览器的历史logging中创build一个新post（即后退button将起作用）

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

如果你只是想改变的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

我相信直接操纵地址栏到一个完全不同的url，而不移动到该url是不允许出于安全原因，如果你对它感到高兴

http://www.mysite.com/products/#{selectedCat}

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

提到更新面板让我猜测你正在使用asp.net，在这种情况下，asp.net ajax历史控制是一个很好的开始

Answer 4

我不认为这是可能的（至less改为一个完全不同的地址），因为这将是一个不直观的滥用地址栏，并可能会促进networking钓鱼攻击。

Answer 5

这不能按照你说的方式来完成。 somej.netbuild议的方法是最接近你可以得到的。 在AJAX时代，这实际上是非常普遍的做法。 即使Gmail使用这个。

Answer 6

“window.location.hash”

正如sanchothefatbuild议应该是唯一的方法。 因为我看过这个function的所有地方都是在URL中的＃后面。