当前位置 : 主页 > 编程语言 > 其它开发 >

移动端IOS返回上一个页面不刷新的问题

来源:互联网 收集:自由互联 发布时间:2022-06-03
场景:在OAS中,有A,B两个页面,A页面点击 ‘去签名’,进入到 B页面(签名页面),在B页面修改了签名状态(此时为已签名);返回到A页面时,还是展示 ‘去签名’,并且不调用接

场景:在OAS中,有A,B两个页面,A页面点击 ‘去签名’,进入到  B页面(签名页面),在B页面修改了签名状态(此时为已签名);返回到A页面时,还是展示 ‘去签名’,并且不调用接口。

原因:ios 是两个webview,进入到下一个页面时,会保留之前的页面快照(相当于页面进行了缓存);在安卓系统中,共用一个webview,因此会进行替换,从而返回的时候会进行刷新。

解决办法:

  1. 跳转签名时时 history replace,让它回不去   
  2. 增加 onpageshow,onpagehide 事件刷新页面
/**
 * ios 解决页面返回不刷新问题
 */
export function refreshPageByBack() {
  if (getPlatform() === "iOS") {
    let isPageHide = false;
    console.log("------> page <--------");
    window.addEventListener("pageshow", function () {
      if (isPageHide) {
        console.log("------> pageshow <------");
        window.location.reload();
      }
    });
    window.addEventListener("pagehide", function () {
      console.log("------> pagehide <------");
      isPageHide = true;
    });
  }
}

/**
 * 获取当前平台:android还是iOS
 */
function getPlatform() {
  let u = navigator.userAgent;
  let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //判断是否是 android终端
  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是 iOS终端
  if (isAndroid) {
    return "android";
  } else if (isIOS) {
    return "iOS";
  } else {
    return "PC";
  }
}

  

上一篇:Java 实现等频分箱
下一篇:没有了
网友评论