有没有一种方法可以在不刷新页面的情况下更改浏览器的地址栏？

Question

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

在用户点击分类后，我想要更改浏览器地址栏中的URL，将其从原来的地址改变为

www.mysite.com/products 

翻译成像这样的格式

www.mysite.com/products/{selectedCat} 

有没有某种JavaScript API可以实现不刷新页面的效果？

- hashem

Answer 1

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

如果您想要在浏览器历史记录中创建新的记录（即后退按钮可用），

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

- Alfred

---

请注意：这些操作会更改URL中的路径和/或查询字符串，但无法更改协议、域名或端口（因为那样会导致安全问题，正如其他人所指出的）。上面的hash函数可以更改锚点（或片段标识符）。 - Chris S

只是说，在你的例子'/item/35'}中，多了一个}。 - Zhanger

一个更好的库似乎是 https://github.com/browserstate/history.js，它被积极维护并广泛使用，而 fortes-history.js 已经闲置了 3 年。 - Gonfi den Tschal

我对Web开发还有些新，那么在这种情况下，对象会是什么？ - Alexander Ryan Baggett

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

Answer 2

除了之前提到的，要在onclick函数中编辑window.location.hash属性以匹配你想要的URL。

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

- sanchothefat

---

有没有办法在URL中不使用“#”符号来更改URL？ - SHEKHAR SHETE

Answer 3

我认为直接在地址栏中操纵完全不同的URL而不移动到该URL是不允许的，出于安全考虑。如果您希望它是

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

即在同一页面内的锚点链接，则可以查看现在大多数JavaScript库中存在的各种历史记录/“返回按钮”脚本。

提到更新面板，我猜您正在使用Asp.net，在这种情况下，Asp.net Ajax历史记录控件是一个很好的起点。

- Justin Wignall

Answer 4

我认为这是不可能的（至少是完全更改地址），因为这将是地址栏的一个不直观的误用，可能会促进网络钓鱼攻击。

- Galwegian

---

与其说这是不直观的，我认为你不应该能够这样做，因为它可能会被用于网络钓鱼攻击。无论如何，这是+1。 - OregonGhost

是的，我刚想到这个。不是一个好主意。谢谢OregonGhost。 - Galwegian

我认为这是可能的...请查看Wikimapia...当您拖动地图时，URL会发生变化... - Shivasubramanian A

@Shivasubramanian-a：我查看了Wikimapia，确实，他们只是使用了一些j建议并由sanchothefat描述的技术：只更改锚点名称。这是安全的，可以防止钓鱼攻击... - PhiLho

Answer 5

按照你的说法是无法完成的。somej.net 建议的方法是最接近的。在 AJAX 时代，这实际上是非常普遍的做法。甚至 Gmail 也使用了这种方法。

- aalaap

Answer 6

"window.location.hash"

正如sanchothefat所建议的那样，这应该是唯一的做法。因为我看到的所有地方都是在URL的#后面使用此功能。

- MajiD Fatemian