問題描述

ios內(nèi)嵌h5頁(yè)面，從a頁(yè)面跳轉(zhuǎn)到b頁(yè)面，b頁(yè)面設(shè)置了緩存，然后走h(yuǎn)5的返回，到a頁(yè)面時(shí)，a頁(yè)面無法獲取到緩存

問題原理

其實(shí)并不是a頁(yè)面拿不到緩存，而是因?yàn)閕os的緩存機(jī)制造成。返回本頁(yè)面時(shí)，頁(yè)面沒有重新請(qǐng)求，所以你拿到的緩存實(shí)際是你第一次進(jìn)入本頁(yè)面時(shí)拿到的緩存值，所以自然無法走得通。

解決辦法

通過windows頁(yè)面監(jiān)聽，監(jiān)聽頁(yè)面隱藏顯示，當(dāng)從另一個(gè)頁(yè)面返回時(shí)，刷新當(dāng)前頁(yè)面即可。

var isPageHide;
if (checkDevice() == "iOS") {        //checkDevice()是一個(gè)判斷設(shè)備類型的方法
  isPageHide = false;
  window.addEventListener('pageshow', function () {
    if (isPageHide) {
      window.location.reload();
    }
  });
  window.addEventListener('pagehide', function () {
    isPageHide = true;
  });
}

附帶一個(gè)我用的獲取設(shè)備類型的方法：checkDevice()吧，有需要自取。

function checkDevice() {
  var ua = window.navigator.userAgent.toLowerCase();
  var u = navigator.userAgent;
  u = u.toLowerCase();
  if (u.indexOf('android') != -1) {
    // 安卓端
    return 'android';
  } else if (ua.match(/mingtang_ios/) == "mingtang_ios") {
    return 'iOS';
  }
  return 'other';
}