如何在不更改浏览器历史记录的情况下更改 url

Posted 2023-02-25

【中文标题】如何在不更改浏览器历史记录的情况下更改 url

【英文标题】：how to change url without changing browser history

【发布时间】：2014-01-23 02:35:36

【问题描述】：

到目前为止，我只知道如果我想在不重新加载整个页面的情况下更改 URL，我必须使用 html 浏览器 history API。

我在我的网站中使用了这个概念。让我们举个例子。假设用户在这个页面上

 https://www.example.com/aboutus

然后他转到我们有过滤器的产品列表。单击任何过滤器系统会生成类似这样的新网址

https://www.example.com/products?brands[]=song&brands[]=samsung&condition[]=new

内部只是调用

history.pushState(, 'Title', link.href);

但是，它有一个问题。单击back 按钮会转到上一个过滤器。 我不想要这个功能。我想要，在单击浏览器后退按钮时，它应该转到current 页面之前的页面。在我们的例子中，它应该采取

https://www.example.com/aboutus

谢谢。

【问题讨论】：

好吧，如果您要重定向到不同的页面（/products 来自 /aboutus，它不会重新加载吗？历史 API 的重点是允许后退菜单中的 url在同一页面上转到以前的状态

你也可以使用

仅供参考，这个问题是在 coursera 有这个功能时被问到的，目前我怀疑。

【参考方案1】：

您正在寻找replaceState()，它会替换历史中的当前位置，而不是像pushState() 那样推送一个新位置

history.replaceState(, 'Title', link.href);

来自MDN

history.replaceState() 的操作与history.pushState() 完全相同 除了replaceState() 改为修改当前历史条目 创建一个新的。

replaceState() 在您想要更新 当前历史条目的状态对象或 URL 以响应某些 用户操作。

记住，some functions are not available on older browsers。但是有一个library 这可以帮助你。

【讨论】：

在上面同一个 MDN 页面上，它还声明了Note that this doesn't prevent the creation of a new entry in the global browser history.

问题：说“不改变浏览器历史记录”。解决方案说：“replaceState() 修改了当前的历史条目”。那么如何在不更改历史记录的情况下更改 URL？我想打开网址test.html，点击链接到test2.html，点击按钮将地址栏改为test3.html（实际上没有下载test3.html），然后按“返回”转到test.html和当我按“前进”时，它必须转到test2.html，而不是test3.html。那么我该怎么做呢？