移動端瀏覽器返回頁面接口不刷新 解決方案


參考博客

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  。。。。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM