精华内容
下载资源
问答
  • 返回刷新页,但当两种方法都不满足你的开发需求的时候,可以采用以下的方法。从a页面,跳转到b页面,b页面的数据操作,会影响a页面的展示。那么在b页面可以使用,sessionStorage.setItem("need-refresh", ...

    通常可以用到window.history.back();

    window.history.go(-1);返回刷新上一页,

    但当两种方法都不满足你的开发需求的时候,可以采用以下的方法。

    从a页面,跳转到b页面,b页面的数据操作,会影响a页面的展示。那么在b页面里就可以使用,sessionStorage.setItem("need-refresh", true); 然后再进行window.history.go(-1)操作。

    // a.html 设置刷新 检测缓存是否有标志 要是有就说明数据有变化 a.html跳转到b.html页面

    window.addEventListener("pageshow", function(){

    if(sessionStorage.getItem("need-refresh")){

    location.reload();

    sessionStorage.removeItem("need-refresh");

    }

    });

    // b.html 如果是数据变化了就写一条缓存 b.html返回到a.html页面

    sessionStorage.setItem("need-refresh", true);

    展开全文
  • 在A页面里会有个按钮跳转到B页面选择医生,当选择完再跳转回来A。这样重复多次后,再次点击A页面返回还是返回到了B而不是app的页面。原因就是因为浏览器的访问记录问题。 所以解决这个问题的时候,我选择了...

    在开发中遇到的两种情况

    1.第一种是因为app内嵌页面。在A页面里会有一个按钮跳转到B页面选择医生,当选择完再跳转回来A。这样重复多次后,再次点击A页面的返回后就还是返回到了B而不是app的页面。原因就是因为浏览器的访问记录问题。

    所以解决这个问题的时候,我选择了把值存储起来,然后在用window.history.back()进行返回 这样就会把这个记录去掉。在安卓是可以的,但是ios获取不到值。用document.referrer这个还是会有记录。

    2.第二种是因为A页面有个按钮点击是跳转到外链C,然后当跳转过一次之后再返回就要启动A页面的自动跳转B的机制。所以我在A第一次点击按钮跳转C的时候自动更改当前的链接,然后在进行跳转。这样在从外链返回的时候是可以在链接中获取到状态值来判断我是显示过外链了 所以就直接启动自动跳转B。

    以上的方式都是在安卓可以,ios不行,原因就是因为ios不刷新。所以在ios的时候来监听,进行刷新

    var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
    if (browserRule.test(navigator.userAgent)) {
         window.onpageshow = function(event) {
               if (event.persisted) {
                     window.location.reload()
               }
         };
    }

     

    展开全文
  • 一些浏览器中返回按钮是直接使用缓存的,不会执行任何js代码,例如, 在提交的时候将按钮设置为loading状态,如果在提交成功后没有对按钮进行处理,那么返回后按钮依然是loading状态,这很尴尬了。 原因:部分...

    看到别人写了很好的文章特转载过来

     

    一些浏览器中返回按钮是直接使用缓存的,不会执行任何js代码,例如, 在提交的时候将按钮设置为loading状态,如果在提交成功后没有对按钮进行处理,那么返回后按钮依然是loading状态,这就很尴尬了。

    原因:部分浏览器在后退时不会触发onload事件,這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache)

    什么是bfcache

    《JavaScript高级程序设计》有提及bfcache:

    bfcache,即back-forward cache,可称为“往返缓存”,可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存不仅保存页面数据,

    还保存了DOM和JS的状态,实际上是将整个页面都保存在内存里。如果页面位于bfcache中,那么再次打开该页面就不会触发onload事件

    pageshow事件

    这个事件在页面显示时触发,无论页面是否来自bfcache。在重新加载的页面中,pageshow会在load事件触发后触发;

    而对于bfcache中的页面,pageshow会在页面状态完全恢复的那一刻触发。

    pagehide事件

    该事件会在浏览器卸载页面的时候触发,而且是在unload事件之前触发。

    persisted属性

    pageshow事件和pagehide事件的event对象还包含一个名为persisted的布尔值属性。

    • 对于pageshow事件,如果页面是从bfcache中加载的,则这个属性的值为true;否则,这个属性的值为false。
    • 对于pagehide事件,如果页面在卸载之后被保存在bfcache中,则这个属性的值为true;否则,这个属性的值为false。

    不同的浏览器在浏览器会在当前窗口“打开”历史纪录中的前一个页面的表现上并不统一,这和浏览器的实现以及页面本身的设置都有关系。

     

    解决方案

     

    Firefox的开发者文档中提供了一些思路:

    • 页面监听了 unload 或者 beforeunload 事件;
    • 页面设置了 “cache-control: no-store”.
    • 网站使用 HTTPS 同时页面至少满足以下一个条件:
      • “Cache-Control: no-cache”
      • “Pragma: no-cache”
      • 设置请求头 “Expires: 0” 或者 “Expires” 的值为 “Date” 之前的值 (除非 “Cache-Control: max-age=” 也被设置了);
    • 页面在用户前进后退的时候还没有完全加载完或者它有正在进行的网络请求,比如 XMLHttpRequest;
    • 页面正在进行IndexedDB操作;
    • 顶层的页面包含有frame,并且这些frame由于这里列的任何一条原因而不能被缓存;
    • 页面在一个frame内,并且用户在这个frame内跳转到了一个新的网页,这里将被缓存的是新载入的网页

    JS监听pageshow事件阻止页面进入bfcache

    
     

    1

    2

    3

    4

    5

    
     

    window.addEventListener('pageshow', function( e ){

    if (e.persisted) {

    window.location.reload()

    }

    })

     

    Safari、UC、qq浏览器测试通过。但是UC、qq浏览器会先闪过bfcache中的页面,因为pageshow是在load事件触发之后才触发的。browser依然会保留红色,我认为是因为browser回到上页时不触发任何事件。

    JS监听pagehide事件阻止页面进入bfcache

    
     

    1

    2

    3

    4

    5

    6

    7

    8

    9

    
     

    window.addEventListener('pagehide', function(e) {

    var $body = $(document.body);

    $body.children().remove();

    // 要等到回调函数完成,用户按返回才执行script标签的代码

    setTimeout(function() {

    $body.append("<script type='text/javascript'>window.location.reload();<\/script>");

    });

    });

     

    Safari、UC、qq浏览器测试通过。browser依然会保留红色,我认为是因为browser回到上页时不触发任何事件。

    给响应添加Cache-Control的header

    代码示例如下:
    在jsp模板的header部分加入如下的禁用缓存设置:

    
     

    1

    2

    3

    4

    5

    6

    7

    
     

    <head>

    <%

    response.setHeader("Cache-Control","no-cache,no-store,must-revalidate");

    response.setHeader("Expires", "0");

    response.setHeader("Pragma","no-cache");

    %>

    </head>

     

    安卓webview cache的解决方案

    该方案的前提是浏览器在向server请求页面时,每次都用jsp重新生成html。需要页面本身有禁用缓存的配置。

    
     

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    
     

    <!-- 安卓webview 后退强制刷新解决方案 START -->

    <jsp:useBean id="now" class="java.util.Date" />

    <input type="hidden" id="SERVER_TIME" value="${now.getTime()}"/>

    <script>

    //每次webview重新打开H5首页,就把server time记录本地存储

    var SERVER_TIME = document.getElementById("SERVER_TIME");

    var REMOTE_VER = SERVER_TIME && SERVER_TIME.value;

    if(REMOTE_VER){

    var LOCAL_VER = sessionStorage && sessionStorage.PAGEVERSION;

    if(LOCAL_VER && parseInt(LOCAL_VER) >= parseInt(REMOTE_VER)){

    //说明html是从本地缓存中读取的

    location.reload(true);

    }else{

    //说明html是从server端重新生成的,更新LOCAL_VER

    sessionStorage.PAGEVERSION = REMOTE_VER;

    }

    }

    </script>

    <!-- 安卓webview 后退强制刷新解决方案 END -->

     

    总结

    1. PC浏览器,设置禁用页面缓存header即可实现后退刷新

    2. 支持bfcache/page cache的移动端浏览器,JS监听pageshow/pagehide,在检测到后退时强制刷新

    3. 在前2个方案都不work的情况下,可以在HTML中写入服务端页面生成版本号,与本地存储中的版本号对比判断是否发生了后退并使用缓存中的页面

    展开全文
  • 完美解决微信页面返回刷新问题

    万次阅读 2018-08-12 12:22:48
    现在遇到个小问题,但是又很不好解决的个问题:就是从页面跳到另外页面,然后再按虚拟键返回时(小米手机左右滑动),页面刷新!可能有些场景为了性能可以不去请求服务器,但是我这个问题是其他页面...

           新到的这家公司业务重点是放在移动端的(以前很少做微信平台相关的页面),比如微信,小程序,支付宝等等平台。所以页面的制作难免和移动端打交道。现在就遇到一个小问题,但是又很不好解决的一个问题:就是从一个页面跳到另外一个页面,然后再按虚拟键返回时(小米手机左右滑动),页面不刷新!可能有些场景为了性能可以不去请求服务器,但是我这个问题是其他页面更改了数据,返回的时候数据必须更新!但是你微信做了个好人,自己主动不去刷新,与我的业务是相矛盾的。这样可就愁死我了。

         为了解决这个问题,我先了解了一下原理:参考了这些网站:https://www.jianshu.com/p/6baa49e26533, 

    https://blog.csdn.net/mrbourne/article/details/60957652。他们的解决方案无外乎这样子:

    let needRefresh = sessionStorage.getItem("need-refresh");
    if(needRefresh){
      sessionStorage.removeItem("need-refresh");
      location.reload();
    }
    
    //然后被跳转的页:
    sessionStorage.setItem("need-refresh", true);

    感觉代码冗余,原理是说的很清楚了,但是解决方案不尽如人意。效果就是回到首页缓存一次,刷新一次,给人的错觉是刷新了两次(因为reload()的存在,页面无论如何都会加载一次。),虽然这样解决了问题,但是无法通过我自己这一关,我无法忍受这种体验效果差!

            我就在想,像一些实时性的网站,比如:比分网站,新闻网站,有些可能是定时器每隔一段时间ajax请求服务器。那我就类似这样,一开始进去就用定时器的形式请求数据,我也担心他还是会把你缓存起来,不去请求服务器。但是结果出人意料的解决了这个问题:代码如下:

    setTimeout(()=>{
       this.getHomeData();
    },100);

    其实就是人为的给了一个假的定时器(其实有可能 这里的 0 为 200 系统原因,不去纠结。)。问题就此解决。什么多余的代码不用写,只是人为的创造了一个假的定时器。

         注:一开始我想定时0毫秒,真实环境中不生效,后来改成100ms。又有效果了,暂时解决了。你们最好做个完整的测试去验证。测试环境和真实环境会有些区别。——2018/08/24补充。

     

    展开全文
  • 虽然页面跳转是很完美但是却隐含了另个问题,在我需要返回的时候再回来发现页面并没有刷新,直接加reload()方法也无法实现,也尝试了使用别的例如**window.history.back();**之类的都没办法因为它写在mui跳转方法里面...
  • 业务需求涉及到返回页问题,第时间想到了window.history.go(-1)方法,这样做本身没有任何问题,但是在微信中,安卓手机还好返回页面会重新加载,而ios却不会重新加载页面,这很难受了。 解决方案: ...
  • 平常我们在做微信网页开发的时候,一般的苹果手机会点左上角的返回按钮返回,安卓手机会按返回键,但是返回的是缓存中的上页,有时候我们需要看到的是刷新后的页面,比如我们点上传照片跳转上传页,上传完后返回上...
  • = "Bencalie"){ //如果页面的 name 属性不是指定的名称就刷新它 location.reload(); window.name = "Bencalie";}else{ //如果页面的 name 属性是指定的名称就什么都不做,避免不断的刷新 window.name = "";} 
  • 下面说的是使用了angularjs、ionic开发的手机app中使用的返回页并刷新的方法。 场景:回复的页面是单独的,点击保存回复后会回到上页面,此时上页面会显示出你新回复的内容 回复页面的c...
  • 下面说的是使用了angularjs、ionic开发的手机app中使用的返回页并刷新的方法。 场景:回复的页面是单独的,点击保存回复后会回到上页面,此时上页面会显示出你新回复的内容 回复页面的...
  • 前两天发现个奇怪的问题:我在h5手机页面上通过window.open(url)的方式打开个新窗口,在新窗口关闭的时候返回数据给父页面,然后新窗口自动close(),拿手机测试发现没有问题,测试通过。但是在PC端模拟的时候发现...
  • 手机返回键的那些事

    千次阅读 2018-02-06 15:11:00
    刚好在研究这个关于手机返回事件,将此记录下来了。。。 :简单的返回。不刷新 window.history.go(-1);//正常返回,a.htm不刷新 window.history.back();//同上 window.history.forward();//同上 请注意...
  • 最近在做个户外社区大屏的项目,因为大屏是全屏显示,没法手动刷新,不可能在页面专门做刷新按钮,也不好看,那这样的需求显得格外重要了。 首先我们来分析一下需求:  1.15分钟——需要定时器  2.无操作...
  • 最近在做个户外社区大屏的项目,因为大屏是全屏显示,没法手动刷新,不可能在页面专门做刷新按钮,也不好看,那这样的需求显得格外重要了。 首先我们来分析一下需求:  1.15分钟——需要定时器  2.无...
  • 返回都会去历史记录回退 -1 所以在进入页面之前 往历史记录里面多记录次当前页面的链接。然后再回退的时候监听刷新,去做一些事情。 1、挂载完成后,判断浏览器是否支持popstate // BBBB.vue moun...
  • 有些情况下使用ajax也是无法解决的, 我看网上很多后退也可以实时载入数据, 比如手机端,,消息未读 但是读了之后再返回如果不刷新还是显示未读,体验不好,我特别好奇那些高手是怎么做的, 但是今天我百度到了个方法 ...
  • 语句能返回页但是无法自动刷新,已经被苹果微信内置浏览器坑了太多次了。。。这次总算下定决心找一下解决办法了。 我详细描述下这坑是这样的,使用流量是一切正常的,但是当使用公司公用无线网时,大概是网速...
  • 一般情况下,微信自带的返回按钮都是返回个路径,可是当我的页面时用户扫码进入的,没有上条路径,所以点击下面的返回按钮,会一直刷新当前页,现在的需求是,当用户扫码进入的时候,点击返回时,让他返回到...
  • 微信公众号进入H5页面之后,点击...第三:这个问题在iPhone4s上面出现过,在小米上面出现过,在iphone6s上面也出现过解决方案:刷新页面之后可以正常显示但是找不到具体问题在哪里?请知道的朋友留言解决!不胜感激!
  • 下面说的是使用了angularjs、ionic开发的手机app中我使用的返回页并刷新的方法。 场景:回复的页面是单独的,点击保存回复后会回到上页面,此时上页面会显示出你新回复的内容 回复页面的...
  • 1,使用原理 利用history 和 浏览器 刷新popstate状态 去实现 2,判断浏览器是否支持popstate ...//那个界面使用,把代码写到那个界面 ... // 往历史记录里面添加条新的当前页面的url history.pushState(null,
  • 后端不再负责模板渲染、输出页面工作,后端API通用化,即同一套后端程序代码,不用修改可以用于Web界面、手机、平板等多种客户端。 -单页面缺点: -首次加载耗时比较多。 解决办法:可以采用基于HTTP Chunk 的首...
  • Flutter 返回按钮监测

    2021-04-29 10:13:28
    因为Flutter的路由在返回层的时候不会刷新,所以返回时经常出问题,虽然也可以用路由.then来做页面刷新,但是页面分成好几个文件之后变得冗余,最后决定更改退出到的页面,来避免这个问题。但是自定义Appbar中...
  • 很多APP点击返回键(或者左滑)返回桌面,都是不退出APP,只是进入后台,再次进入APP回到之前的页面,不用刷新或者重新创建。自己也觉得这样用户体验会好很多,虽然有个弊端就是不结束进程,会一直占用内存,但是...
  • 在移动端的时候(特别是在一体机上–android系统),iframe视频播放时按返回键时会...能不能再监听手机返回事件时将该页面刷新后再强制返回到上一页面,结果导致在该页面到首页的系列的返回之路上必须全都写死,
  • 现在移动设备上,尤其是手机这么小的屏幕上,无节制的打开新窗口肯定不是什么好事儿,是得在同个窗口里打开详情页了,那么,从详情页返回列表后的问题也更明显了。PC网页、移动设备APP、软件…应该说,在所有...

空空如也

空空如也

1 2 3 4
收藏数 76
精华内容 30
关键字:

手机页面一返回就刷新