安卓手机浏览器返回页面无刷新的问题

936 阅读1分钟

最近的业务接触的都是当前公司的系统通过登录鉴权跳转到第三方业务系统的场景,这样的好处就是可以减少当前公司业务量,可以快速的实现想要的功能,对接好auth授权就OK,也是时下采用比较广的方案。

image.png

在这个过程中,也遇到不少关于交互的问题:

1、第三方系统返回,直接回到原来跳转第三方时的页面

遇到的问题是调回了中转授权页

解决办法:跳转第三方的跳转方式 location.replace(url)

2、安卓浏览器返回原来系统页面,页面不刷新

问题:由于返回的操作是在第三方系统,而且调用的是浏览器的返回(上一步)的方法,不受控,无法在触发时操作。

接下来就是怎么能够在自己系统页面上监听到返回

window.onpageshow API,event.persisted 判断该页面是否从浏览器缓存中读取,可以作为是否返回进入页面的依据,接着调试一波,发现有进入event.persisted条件,但是location.reload()无法触发,于是继续找解决方案,发现需要用定时器来处理后方可生效

调试发现是OK的,但是紧接着又有一个问题,就是返回后整个页面会从新加载,闪一下,体验不好,于是又做了一个调整,直接执行方法,绕过页面加载,完没解决!

export default {
    ...
    created() {
        window.onpageshow = (event) => {
          if (event.persisted) {
            setTimeout(() => {
              (window.navigator.userAgent.includes('Android') || window.navigator.userAgent.includes('android')) && this.getProject();
            }, 300);
          }
        };
    },
    ...
}