• 解决Safari页面缓存的问题


      在开发一个移动应用的过程中,遇到问题:在订单确认页,用户点击 收货地址链接,跳转到地址选择页面,咋选一个地址,跳转回订单确认页,发现收货地址没有改变,还是最开始的地址。

    用Android手机发现地址有更新,而Iphone手机地址没有更新。

      通过查询资料,发现是如下原因造成:

      “此问题是由于某些浏览器在back的时候是直接使用的之前的视图,页面没有进行重新加载而导致的,在网上找了些资料, 发现这是H5的一些新特性Back-Forward Cache(简称bfcache) ,普通浏览器在back时,如果不是指定Cache-Control、Expires等方法强制停用Cache时,那么一般情况下浏览器大多数都会直接读取本地的缓存, 减少请求和网络传输的成本, 增加浏览的顺从度, 但Cache仅限于静态文件, 浏览器还是得重新加载html, 重新执行脚本,渲染DOM, 而bfcache则不同, 是直接读取缓存里面的html,节省了重新请求页面的时间, 既然是读取缓存的html页面, 那么执行页面的onload事件进行初始化, 会影响原本因用户操作而改变的状态, 所以浏览器在back时是不会触发onload事件.”

      这个时候就会产生上面的问题, 有些业务在返回时是需要重新加载的, 于是H5新增了两个事件onpageshow和onpagehide, 分别是进入网页和离开的时候触发, 即使是用浏览器的前进/后退也会触发这两个事件.

      “Firefox和Safari会bfcache, back时不会触发load, ready事件, 只会触发onpageshow, 而chrome虽然支持onpageshow, 但是back时一样都会触发load,ready事件, opera最操蛋, back时会bfcache,但是不触发onpageshow事件.”

    ==========================================================================================================================================

      解决方案:

      尝试过在页面加上:

    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <meta http-equiv='pragma' content='no-cache'>     但发现不起作用。

      也用过别人的解决方法:   $(window).unload(function () { });    但发现不起作用。

    最终使用:

    window.onpageshow = function(event) {
      if (event.persisted) {
        window.location.reload()
      }
    };

    成功解决问题。

      可以检查pageshow 事件的persisted属性,当页面初始化加载的时候,persisted被设置为false,当页面从缓存中加载的时候,persisted被设置为true。因此,上面代码的意思就是:

    如果页面是从缓存中加载的,那么页面重新加载。

    参考文献:

    http://www.cnblogs.com/AeroJin/p/4783408.html

    http://stackoverflow.com/questions/10106457/pageshow-is-not-received-when-pressing-back-button-on-safari-on-ipad

    https://github.com/christophery/pushy/issues/51

  • 相关阅读:
    洛谷.4717.[模板]快速沃尔什变换(FWT)
    BZOJ.4589.Hard Nim(FWT)
    BZOJ.1758.[WC2010]重建计划(分数规划 点分治 单调队列/长链剖分 线段树)
    BZOJ.4543.[POI2014]Hotel加强版(长链剖分 树形DP)
    Vijos.lxhgww的奇思妙想(k级祖先 长链剖分)
    Codeforces.741D.Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths(dsu on tree 思路)
    Codeforces.600E.Lomsat gelral(dsu on tree)
    11.7 NOIP模拟赛
    11.5 正睿停课训练 Day16
    Maven与Nexus3.x环境构建详解
  • 原文地址:https://www.cnblogs.com/parkdifferent/p/6808581.html
Copyright © 2020-2023  润新知