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

Question

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

用户单击类别后，我要更改浏览器的地址栏网址

www.mysite.com/products

类似于

www.mysite.com/products/{selectedCat}

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

score 158 · Accepted Answer

使用 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);
};

score 31 · Accepted Answer

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

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

score 7 · Accepted Answer

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

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

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

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

score 3 · Accepted Answer

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

score -1 · Accepted Answer

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

score -1 · Accepted Answer

“window.location.hash”

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

6 回答 6