美文网首页
移动端点击返回键,页面不刷新解决方案

移动端点击返回键,页面不刷新解决方案

作者: 前端葱叶 | 来源:发表于2019-01-04 16:38 被阅读0次

    在移动端项目中遇到了点击浏览器返回键,页面不刷新的问题,通过研究学习,采用了以下的解决方案。问题解决了。

    (一)移动端点击返回键,页面不刷新解决方案

    移动端浏览器点击返回上一级,页面不刷新的原因之一:返回上一级的页面是从往返缓存bfcache)中获取的,而浏览器保存了DOM和js的状态,再次打开时不触发onload事件,即页面不会重新加载。
    可在js代码中增加以下页面强制刷新的代码:
    1、判断页面是否存在“往返缓存”;
    2、如果存在,重新加载当前页面。

      // 点击浏览器返回按钮,404页面刷新
     window.addEventListener('pageshow', function (event) {
    //event.persisted属性为true时,表示当前文档是从往返缓存中获取
      if (event.persisted) location.reload();
     });
    

    pageshow和onload很相似:
    “pageshow”:每次浏览网页时触发,事件必须绑在window上;
    “onload”:第一次浏览时触发(用于页面从浏览器缓存中获取时,不触发);

    (二)“往返缓存”

    "往返缓存"(back-forward cache,简称bfcache),当用户点击前往新页面时,会把当前页面(包括页面数据、DOM、JS状态等)保存在bfcache中;当用户点击后退按钮时,会从bfcache中获取上一级的页面,加快页面的转换速度和减少网络请求时间。

    bfcache的出现导致了页面不刷新的问题,如下:
    在A页面点击“去完成”时跳转到B页面,完成任务之后在B页面点击回退按钮,退回到A页面。这个时候A页面的“去完成”按钮理应会变成“已完成”,但是因为A页面跳转B页面的时候,A页面的数据(DOM和js状态)存在了bfcache中,所以从B跳转到A页面时,A页面并不会刷新,按钮不会变成“已完成”。


    往返缓存_图解.jpg

    笔记整理记录

    相关文章

      网友评论

          本文标题:移动端点击返回键,页面不刷新解决方案

          本文链接:https://www.haomeiwen.com/subject/avezlqtx.html