history.replaceState 不适用于 Firefox v56+

Question

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

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

它适用于所有浏览器firefox 最新版本 (v56+) 除外

在 Firefox 中，如果我按 F5，那么它会返回到我已经用上面的代码替换的上一个 URL。

我们将不胜感激任何帮助。

Answer 1

有一个open issue on Bugzilla。

Video Example 1 和 Video Example 2 解释如何重现错误。

条件：

1. 仅Mozilla Firefox版本56+
2. 单页应用
3. 对于路由使用history.replaceState，所有参数不为空

步骤：

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

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

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

主要问题是使用history.replaceState然后点击cmd+r/f5我们会看到浏览器发送替换（正确）url到服务器，但显示不正确的url 在 location.search 和 浏览器 url 栏 中。这种行为会一直持续（如果点击“cmd+r/f5”），直到我们点击浏览器 url 栏上的“enter”。

第一个解决方法来自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

中进行了解释

当登录到包含查询参数的页面时，浏览器会“锁定”到该页面，并以编程方式或手动导航到不同的同域页面，并立即重定向回原始页面。请注意，在 url 中涉及查询参数之前，这不会开始发生，完全奇怪

我还包括other mozilla related issues with history.replaceState 的列表。

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