是否可以在不刷新页面的情况下更改浏览器的地址栏？

91

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

用户单击类别后，我想从以下位置更改浏览器的地址栏网址

www.mysite.com/products

像

www.mysite.com/products/{selectedCat}

而不刷新页面。
我可以使用某种JavaScript API来实现此目的吗？

url address-bar

— 路易索
source

157

使用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

— 阿尔弗雷德
source

4

+1另请注意；这些会更改URL中的path和/或query string；他们无法更改协议，域或端口（因为这将是其他人指出的安全问题）。hash上面的函数可以更改锚（或片段ID）

— Chris S

2

只是说，在您的示例'/ item / 35'}中，添加了一个额外的}

— Zhanger 2012年

正如一个附带的问题，是否有一种方法可以使这些URL在Google中建立索引？

— 彼得·费瑟斯通

1

一个更好的库似乎是github.com/browserstate/history.js，它正在积极维护和广泛使用，而fortes-history.js闲置了3年。

— Gonfi den Tschal

2

请注意，firefox不支持标题，因此请使用document.title =“新标题”。

— 0fnt

31

要添加大家已经说过的话，请编辑window.location.hash属性以匹配您在onclick函数中想要的URL。

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

— 罗博尔克
source

有什么办法可以更改URL中没有'＃'符号的URL？

— SHEKHAR SHETE，2014年

7

我相信出于安全原因，不允许将地址栏直接操作到一个完全不同的网址，而不必移动到该网址，如果您对此感到满意的话

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

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

提到更新面板会使我猜测您正在使用asp.net，在这种情况下，asp.net ajax历史记录控件是一个不错的起点

— 贾斯汀·维尼亚（Justin Wignall）
source

3

我认为这是不可能的（至少更改为完全不同的地址），因为这是对地址栏的不直观的滥用，并且可能会引发网络钓鱼攻击。

— 挪威语
source

我认为您应该做到这一点，而不是凭直觉，因为它可能被滥用为网络钓鱼攻击。无论如何，那是+1。

— OregonGhost

是的，这只是我想到的。这不是一个好主意。感谢OregonGhost。

— Galwegian

1

我不认为它可能...退房维基卫星地图...当你拖动地图，该URL得到改变...

— Shivasubramanian一个

@ Shivasubramanian-a：我看过Wikimapia，的确，他们只是使用somej建议的和sanchothefat描述的技术：只是更改锚点名称。可以安全地防止网络钓鱼……

— PhiLho

-1

这不能像您所说的那样完成。somej.net建议的方法是最接近的方法。在AJAX时代，这实际上是非常普遍的做法。甚至Gmail都使用此功能。

— 阿拉帕
source

-1

“ window.location.hash”

如sanchothefat建议的那样，这应该是唯一的方法。因为我在所有地方都看到了此功能，所以一直在URL中的＃号之后。