在我的应用程序中,隐藏URL中的某些信息我正在使用以下代码。
history.replaceState ({}, "", "bar.html");
它适用于所有浏览器除了firefox最新版本(v56 +)
在Firefox中,如果我按F5,那么它将返回上一个我已用上述代码替换的URL。
任何帮助都将受到高度赞赏。
答案 0 :(得分:3)
Video Example 1和Video Example 2解释了如何重现该错误。
条件:
- 仅Mozilla Firefox版本
56+
- 单页应用程序
- 对于使用
history.replaceState
的路由,所有参数都不为空步骤:
- 登录并重定向到主页
URL
- 在任何应用程序选项卡上导航并替换URL参数
- 按
F5
,cmd + r
或单击Refresh
按钮- Ups!..再次以基础
URL
打开主页(但在其他浏览器中,我们看到选定的标签和正确的URL)
从网址中删除查询字符串时,会遇到相同的行为。
可能是由于以下行为引起的(我引用了Vadim Goncharov)
主要问题是,在使用
history.replaceState
然后单击cmd+r/f5
之后,我们会看到浏览器已将已替换(正确)的邮件发送给服务器(正确)url
,但显示location.search
和浏览器网址栏中中的网址错误。并继续这种行为(如果单击“ cmd + r / f5”,直到我们在浏览器网址栏上单击“输入”。
第一个解决方法发布于Felix Lee
在致电
history.replaceState
之前,请执行location.hash = location.hash;
自行设置
hash
无效,但是使错误消失。
此解决方法并不理想,mtomalley添加了第二种解决方法
由Mathis Wiehl 提出的浏览器请求的URL与位置栏中显示的URL不同。...
此外,解决方法也不理想,因为如果
URL
还没有hash
,location.hash = location.hash
将添加一个,调用popstate
,然后添加历史记录条目。一种不那么简单的替代解决方法:
- 使用后端技术可用的任何方式在客户端上公开请求
URI
- 在页面加载时(在任何客户端路由代码之前),针对
URI
检查window.location
- 如果它们不同,请使用
replaceState
对其进行修复。该位置会在每次重新加载时短暂显示不正确的URL,但至少它将得到修复,并且路由可以按预期工作...
第三种解决方法
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重定向回原始页面。请注意,只有在网址中包含查询参数(完全奇怪)之后,这种情况才会开始发生
我还提供了other mozilla related issues with history.replaceState的列表。
我随时准备对本文进行进一步的分析,研究,改进,并很高兴收到您的反馈。