在做移動端項目的時候經常遇到這樣一個功能比如：
返回后頁面不刷新，一些失效的信息依然顯示在頁面上。這個問題在iphone手機上會出現，在Android手機上返回時會自動刷新（由於手機機器種類不多，無法做更多測試，歡迎補充）。
為了解決這個問題實驗了很多解決辦法用計時器呀onload呀都不行，后來找到了一個方法pageshow。
onpageshow 事件在用戶瀏覽網頁時觸發。
onpageshow 事件類似於 onload 事件，onload 事件在頁面第一次加載時觸發， onpageshow 事件在每次加載頁面時觸發，即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發，此外還有pagehide在不顯示的時候觸發。
為了查看頁面是直接從服務器上載入還是從緩存中讀取，可以使用 PageTransitionEvent 對象的 persisted 屬性來判斷。
window.addEventListener('pageshow', function(event) { console.log("PageShow Event " + event.persisted); console.log(event) })
如果頁面從瀏覽器的緩存中讀取該屬性返回 ture，否則返回 false。然后在根據true或false在執行相應的頁面刷新動作或者直接ajax請求接口更新數據。這一點有個缺陷就是，無論是不是需要更新數據這個頁面都會刷新，我們要做的只是數據變化了才需要更新。於是想到另一個辦法在可能會出現數據變化的頁面設置緩存，即為只要頁面數據變化了就寫緩存一條記錄，在返回頁面后檢測到這條記錄就說明需要頁面刷新或調用接口刷新。
處理方法為：
// 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);
下面給出測試pageshow等的測試代碼：地址http://test.ofoyou.com/pageShow.html
<!DOCTYPE html> <html> <head> <title>頁面顯示與隱藏</title> <meta charset="utf-8"> <meta http-equiv="Pragma" content="no-cache"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js"></script> </head> <body> <a href="http://www.baidu.com">前往百度</a> <input type="button" id="btnSetColor" value="變色" /> <ul id="list"></ul> <script> function dispLog(msg) { var d = new Date(); $("<li />").text(d.toISOString().substr(14, 9) + " " + msg).appendTo("#list"); } //PageTransitionEvent 的persisted屬性檢測是不是從緩存中拿的頁面true是，false不是 window.addEventListener('load', function(event) { dispLog("Load Event "); }) $(window).ready(function() { dispLog("Ready Event"); }); $("#btnSetColor").click(function() { $("#btnSetColor").css("background", "red"); }) window.addEventListener('pageshow', function(event) { dispLog("PageShow Event " + event.persisted); console.log(event) }) window.addEventListener('pagehide', function(event) { dispLog("Pagehide Event " + event.persisted); }) </script> </body> </html>