點擊瀏覽器的返回按鈕,就會刷新歷史頁面這個問題的解決方案

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

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中文網其他相關文章！