前端笔记 Front-end Dev Engineer

安卓WebView下的Location replace的bug

2019-12-06
   

奇葩的Location replace的bug。

缘由

公司项目中,有一个内嵌在app内的一个页面。这个页面有一个总菜单主目录页,和多个同级子页面组成,并且子页面上有tab切换到其它子页面功能,于是要求,按返回键的时候,直接返回到主页面。

当时想都没有想,直接写上location.replace来代替location.href进行跳转。然后简单在chrome上测试一下没问题我就上线了。

奇怪的bug

上线了我也没关心,直到有一天,运营的小伙伴反馈,这个跳转不正常,没有达到预期。

然后,我进行了以下测试:

  • ios的APP中 正常
  • Android的APP中 不正常
  • Android的浏览器中 正常

百思不得其解,明明是很传统的api,是个浏览器都支持的,为啥会出现问题。而且,测试得知只发生在安卓的WebView。

第一时间,我询问了安卓开发,他们说并没有进行特殊处理,一起都是依赖WebView的。

然后我百度大法,没找到为什么,但是找到一段解决方法:

function locationReplace(url){
  if(history.replaceState){
    history.replaceState(null, document.title, url);
    history.go(0);
  }else{
    location.replace(url);
  }
}

另外 还附有原生解决方法: https://stackoverflow.com/questions/14333620/android-webview-location-replace-doesnt-work

原生的看不懂就不看了,直接看js的解决方法,这很简单,就是使用 history.replaceState 替换地址栈中的地址,然后在跳转,相当于使用history这个新的api,手动实现replace功能,变相绕过 location.replace 的bug。简单的说,并没有解决bug,只是换了一组api。

总结

安卓奇奇怪怪的bug也不少呀,只能做个记录,以后都要这么绕了。


评论

Content