JavaScript pushState 在返回的浏览器上不起作用答案

【问题标题】：JavaScript pushState does not work on browser going backJavaScript pushState 在返回的浏览器上不起作用
【发布时间】：2021-01-19 23:48:59
【问题描述】：

相关的站点 URL 是 example.com/news/。通过此 url 加载的页面包含一些复选框和一个按钮。我使用对象 filter 和一些键，如 checkbox1、checkbox2 等，如果选中了复选框，则键得到 true -value，如果未选中，则键获得 false-value。

最后，有一个 var overwriteURL，其中包含值“general-seniors-youth”。

现在单击按钮时，我希望脚本将页面加载到容器中并将 url 更改为 example.com/news/general-seniors-youth/ 而不加载新站点. 我通过以下代码实现了这一点：

if(overwriteURL !== "" ) {
   history.pushState({ test: "test" }, null, "/news/" + overwriteURL + "/");
}

效果很好。正如 Mozilla (https://developer.mozilla.org/de/docs/Web/Guide/DOM/Manipulating_the_browser_history) 的英文文档所说：如果我在脚本运行后导航到 google.com（例如）然后使用浏览器的后退按钮，则 URL 栏实际上应该包含更改后的 URL，所以 example.com/news/general-seniors -青年/。但它确实包含 pushState 之前的原始 URL，所以 example.com/news/。但是当我不导航到 google.com 而是尽可能频繁地使用后退按钮，然后使用前进按钮直到它到达最新的历史条目，然后是 rigth（已更改） URL 显示在 URL 栏中。

哪里出错了？

【问题讨论】：

标签： javascript browser-history pushstate

【解决方案1】：

嗯，我不知道怎么做，但我找到了解决办法。

我认为，问题似乎取决于 var overwriteURL 的内容。在真实站点上，var 有时包含字符和数字的混合以及 -- 来分隔值（例如：-general--seniors--u19--u16- -按-）。

当我对 var overwriteURL 的内容进行实验时，有时没有问题。所以最后我用 / 替换了 -- ，现在它可以完美地工作了。例如，新的 var overwriteURL 看起来像 general/seniors/u19/u16/press/。

因此，作为结论，似乎 URL 中有很多 - 存在问题。

结案！

【讨论】：