history.replaceState不适用于Firefox v56 +

Question

在我的应用程序中，要使用以下代码隐藏URL中的某些信息。

history.replaceState ({}, "", "bar.html");

它可以在所有浏览器中运行，但最新版本为firefox（v56 +）

在Firefox中，如果我按F5键，则它会返回到我已被上述代码替换的上一个URL。

任何帮助将不胜感激。

Answer 1

上有一个未解决的问题Bugzilla。

视频示例1和视频示例2说明了如何重现该错误。

条件：

1. 仅Mozilla Firefox版本 56+
2. 单页申请
3. 对于路由用途history.replaceState，所有参数都不为null

脚步：

1. 登录并重定向到主页库 URL
2. 在任何应用程序选项卡上导航并替换URL参数
3. 按F5，cmd + r或单击Refresh按钮
4. Ups！..再次打开具有基础的主页URL（但在其他浏览器中，我们看到选定的选项卡和正确的URL）

从url中删除查询字符串时，会遇到相同的行为。

这可能是由于以下行为引起的（我引用了Vadim Goncharov）

主要问题在于，使用history.replaceState并单击后，cmd+r/f5我们将看到浏览器将替换（正确）发送 url到服务器，但在和浏览器url bar中均显示不正确的url。并继续这种行为（如果单击“ cmd + r / f5”），直到我们单击浏览器网址栏上的“输入”。location.search

Felix Lee发布的第一个解决方法

打电话之前history.replaceState，先 location.hash = location.hash;

hash自行设置无效，但会使错误消失。

此解决方法不理想，mtomalley添加了第二个解决方法

浏览器请求的URL与位置栏中显示的URL不同。

此外，该解决方法也不是理想的选择，因为如果URL尚不具有hash，location.hash = location.hash添加一个，调用popstate并添加历史记录条目，则该解决方法也不理想。

另一个替代方法要简单得多：

1. 使用后端技术可用的任何方式将请求公开URI给客户端
2. 在页面加载时（在任何客户端路由代码之前），请URI针对window.location
3. 如果它们不同，请使用replaceState修复它。

该位置将在每次重新加载时短暂显示不正确的URL，但至少它将得到修复，并且路由可以按预期工作...

Mathis Wiehl提出的第三种解决方法

window.addEventListener('unload', function(event) { location.replace(location) });

这样，在刷新和制表符关闭的情况下，js位置的状态将刷新到FFs位置（顺便说一句，当用例如+++ t重新打开时，它们具有相同的问题）。

Mathis的上述解决方法具有以下问题（我引用jimmyhmiller）

Next.js尝试使用上面Mathis提到的解决方法，这给他们带来了一些问题。此处的详细信息：https : //github.com/zeit/next.js/pull/6896

上述解决方法遇到了一个新的错误，在问题＃6882中进行了解释

当登陆包含查询参数的页面时，浏览器将“锁定”到该页面，并以编程或手动方式导航到另一个相同域的页面，将insta重定向回原始页面。请注意，只有在网址中包含查询参数后，这种情况才会开始发生，这完全是奇怪的

我还与history.replaceState一起列出了其他与mozilla相关的问题。

我随时准备进一步分析，研究和改进本文，并很高兴收到您的反馈。