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

最新推荐文章于 2023-08-01 00:22:01 发布

weixin_30477797

最新推荐文章于 2023-08-01 00:22:01 发布

阅读量396

点赞数

原文链接：http://www.cnblogs.com/haibiancao/p/6930369.html

版权

参考博客

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);
        }
    };