參考博客
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 。。。。