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

Posted 2023-02-22

【中文标题】有没有办法在不刷新页面的情况下更改浏览器的地址栏？

【英文标题】：Is there a way to change the browser's address bar without refreshing the page?

【发布时间】：2010-09-26 00:35:57

【问题描述】：

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

用户点击类别后我想更改浏览器的地址栏网址

www.mysite.com/products 

类似

www.mysite.com/products/selectedCat 

不刷新页面。 我可以使用某种 javascript API 来实现这一点吗？

【参考方案1】：

使用 html5，您无需重新加载即可修改 url：

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

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

【讨论】：

+1 另请注意；这些更改 URL 中的 path 和/或 query string；他们不能更改协议、域或端口（正如其他人指出的那样，这将是一个安全问题）。上面的hash函数可以改变anchor（或者fragment id）

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

顺便问一下，有没有办法让这些网址在 Google 中被编入索引？

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

请注意firefox不支持title，所以使用document.title="new title"。

【参考方案2】：

“window.location.hash”

正如 sanchothefat 所建议的那样，应该是唯一且唯一的方法。因为我看到的所有地方都有这个功能，都是在URL中的#之后。

【参考方案3】：

要添加到这些家伙已经说过的内容，请编辑 window.location.hash 属性以匹配您想要在 onclick 函数中使用的 URL。

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

【讨论】：

有什么方法可以更改网址中没有“#”符号的网址？

【参考方案4】：

这不能按照你说的方式完成。 somej.net 建议的方法是您可以获得的最接近的方法。这实际上是 AJAX 时代非常普遍的做法。甚至 Gmail 也使用它。

【参考方案5】：

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

www.mysite.com/products/#selectedCat

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

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

【参考方案6】：

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

【讨论】：

我认为您不应该这样做，因为它可能被滥用于网络钓鱼攻击，而不是不直观。无论如何，这是 +1。

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

我确实认为这是可能的...查看Wikimapia...当您拖动地图时，URL 会改变...

@Shivasubramanian-a：我查看了 Wikimapia，确实，他们只是使用 somej 建议并由 sanchothefat 描述的技术：只是更改锚名称。哪个可以防止网络钓鱼...