首先我們知道這個問題是如何發生的，假如我們有如下頁面列表信息頁面，點擊進入詳情頁面，在詳情頁面修改了數據通過歷史返回，再返回到列表信息頁面，因為列表信息是歷史返回的，還是默認顯示原來修改前的數據，要刷新一下才是修改后的數據，那么我們有什么辦法可以點擊手機返回按鈕就可以刷新之前歷史頁面中的數據呢？

onpageshow事件和onload事件。 onpageshow 事件類似于 onload 事件，onload 事件在頁面第一次加載時觸發， onpageshow 事件在每次加載頁面時觸發，即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發。

為了查看頁面是直接從服務器上載入還是從緩存中讀取，你可以使用 PageTransitionEvent 對象的 persisted 屬性來判斷。 如果頁面從瀏覽器的緩存中讀取該屬性返回 ture，否則返回 false

解決方案

通過onload方式

代碼如下：

頁面中寫一個隱藏的input

<input type="hidden" id="refreshed" value="no">

js操作如下

    onload=function(){
        var refreshedId=document.getElementById("refreshed");
        if(refreshedId.value=="no"){
            refreshedId.value="yes";
           } else{
             refreshedId.value="no";
             location.reload();
         }
    }

通過onpageshow 方式

這種方式在電腦上是沒有問題的，但是蘋果safari中返回不執行onload事件，要用如下方式：

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

通過實際操作發現，event.persisted在電腦中一直是返回false，但是在手機safari中是沒有問題的。

綜合解決方案

因此，可以如下寫代碼：

  if ((/iphone ipod ipad.*os 5/gi).test(navigator.appVersion)) {
        window.onpageshow = function(event) {
            if (event.persisted) {
                window.location.reload() 
            }
        };
    }else{
        onload=function(){
            var refreshedId=document.getElementById("refreshed");
            if(refreshedId.value=="no"){
                refreshedId.value="yes";
               } else{
                 refreshedId.value="no";
                 location.reload();
             }
        }
    }

通過上面代碼發現在safari中第一次打開頁面的時候，有時候會出現閃屏效果。

添加如下代碼：

$(window).bind("unload", function() { });

就沒有再出現閃屏效果了。

通過iframe方式阻止緩存

頁面中添加如下代碼

<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this prevents back forward cache
</iframe>

這種方式有待驗證。

通過時間戳強制刷新方式

下面代碼是針對iPad中safari返回按鈕問題

var showLoadingBoxSetIntervalVar;
var showLoadingBoxCount = 0;
var showLoadingBoxLoadedTimestamp = 0
function showLoadingBox(text) {
    var showLoadingBoxSetIntervalVar=self.setInterval(function(){showLoadingBoxIpadRelaod()},1000);
    showLoadingBoxCount = 0
    showLoadingBoxLoadedTimestamp = new Date().getTime();
    //Here load the spinner
}
function showLoadingBoxIpadRelaod()
{
    //計算時間超過500毫秒
    var diffTime = ( (new Date().getTime()) - showLoadingBoxLoadedTimestamp - 500)/1000;
    showLoadingBoxCount = showLoadingBoxCount + 1;
    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    if(diffTime > showLoadingBoxCount && isiPad){
        location.reload();
    }
}

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS的編碼怎么轉換

css3點擊顯示漣漪特效

怎樣用canvas做出粒子噴泉動畫的效果

以上就是點擊瀏覽器的返回按鈕,就會刷新歷史頁面這個問題的解決方案的詳細內容，更多請關注php中文網其它相關文章！