移动端浏览器返回页面接口不刷新 解决方案

参考博客

http://whutzkj.space/2017/01/14/H5%E6%B5%8F%E8%A7%88%E5%99%A8%E5%92%8Cwebview%E5%90%8E%E9%80%80%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6/

 

 
<#assign jsName = "main" />
<#assign pageName = "detail" />
<#assign SERVER_TIME = .now />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
    <#-- 拯救页面缓存接口不刷新 begin-->
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />  
    <meta http-equiv="pragma" content="no-cache" />  
    
    <script>
        window.onpageshow = function(event) {
            if (event.persisted) {
                window.location.reload()
            }
        };
        var SERVER_TIME = '${((SERVER_TIME!0)?long)?c}';

        if(SERVER_TIME && SERVER_TIME != '0'){ 
            var LOCAL_TIME = sessionStorage && sessionStorage['LOCAL_TIME' + '${pageName!}'];
            
            if (LOCAL_TIME && parseInt(LOCAL_TIME) >= parseInt(SERVER_TIME)) {
                window.location.reload();
            }else{
                sessionStorage['LOCAL_TIME' + '${pageName!}'] = SERVER_TIME;
            }
        }
    </script>
    <#-- 拯救页面缓存接口不刷新 end-->
 
</head>

从3个方向入手

1 meta

2 pageshow()

3 服务器时间 和 浏览器存储时间做对比 

 

 

=======2017.11.02========

因为之前是用freemarker写的动态页， 每次都能请求到服务器时间，如果是静态页面，要怎么处理呢？

    var backUpdate = function(fn){
        var hiddenKey = 'hidden' in document ? 'hidden' : ('webkitHidden' in document ? 'webkitHidden' : '');
        var time = +new Date;
        if(hiddenKey === '' || typeof fn != 'function') return;

        if('onpageshow' in window){
            window.addEventListener('pageshow', function(e){
                e.persisted && fn();
            });
        }else{
            setInterval(function(){
                +new Date - time > 3e3 && !document[hiddenKey] && fn();
                time = +new Date;
            }, 15e2);
        }
    };

主要还是使用onpageshow 方法  

如果不支持此方法  一直留在本页面， backUpdate 不会重复执行传如的fn ，如果离开本页面，计时器会暂停，回到本页面计时器继续， 时间差大于3000ms ，传入的fn就会执行一次。。

但是有的手机还是不好使，

实验发现，某些手机支持onpageshow  但是不支持 e.persisted  。。。。

 

posted @ 2017-06-01 19:04  海边草  阅读(3868)  评论(2)  编辑  收藏  举报