history.replaceState不适用于firefox v56 +

时间:2018-05-02 10:27:29

标签: javascript firefox browser-history html5-history

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

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

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

在Firefox中,如果我按F5,那么它将返回上一个我已用上述代码替换的URL。

任何帮助都将受到高度赞赏。

1 个答案:

答案 0 :(得分:3)

有一个open issue on Bugzilla

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

  

条件:

     
      
  1. 仅Mozilla Firefox版本56+
  2.   
  3. 单页应用程序
  4.   
  5. 对于使用history.replaceState的路由,所有参数都不为空
  6.   
     

步骤:

     
      
  1. 登录并重定向到主页URL
  2.   
  3. 在任何应用程序选项卡上导航并替换URL参数
  4.   
  5. F5cmd + r或单击Refresh按钮
  6.   
  7. Ups!..再次以基础URL打开主页(但在其他浏览器中,我们看到选定的标签和正确的URL)
  8.   

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

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

  

主要问题是,在使用history.replaceState然后单击cmd+r/f5之后,我们会看到浏览器已将已替换(正确)的邮件发送给服务器(正确) url,但显示location.search浏览器网址栏中中的网址错误。并继续这种行为(如果单击“ cmd + r / f5”,直到我们在浏览器网址栏上单击“输入”。

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

  

在致电history.replaceState之前,请执行     location.hash = location.hash;

     

自行设置hash无效,但是使错误消失

此解决方法并不理想,mtomalley添加了第二种解决方法

  

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

     

此外,解决方法也不理想,因为如果URL还没有hashlocation.hash = location.hash将添加一个,调用popstate,然后添加历史记录条目

     

一种不那么简单的替代解决方法:

     
      
  1. 使用后端技术可用的任何方式在客户端上公开请求URI
  2.   
  3. 在页面加载时(在任何客户端路由代码之前),针对URI检查window.location
  4.   
  5. 如果它们不同,请使用replaceState对其进行修复。
  6.   
     

该位置会在每次重新加载时短暂显示不正确的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重定向回原始页面。请注意,只有在网址中包含查询参数(完全奇怪)之后,这种情况才会开始发生

我还提供了other mozilla related issues with history.replaceState的列表。

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