首先我們知道這個(gè)問題是如何發(fā)生的，假如我們有如下頁面列表信息頁面，點(diǎn)擊進(jìn)入詳情頁面，在詳情頁面修改了數(shù)據(jù)通過歷史返回，再返回到列表信息頁面，因?yàn)榱斜硇畔⑹菤v史返回的，還是默認(rèn)顯示原來修改前的數(shù)據(jù)，要刷新一下才是修改后的數(shù)據(jù)，那么我們有什么辦法可以點(diǎn)擊手機(jī)返回按鈕就可以刷新之前歷史頁面中的數(shù)據(jù)呢？

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

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

解決方案

通過onload方式

代碼如下：

頁面中寫一個(gè)隱藏的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中返回不執(zhí)行onload事件，要用如下方式：

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

通過實(shí)際操作發(fā)現(xiàn)，event.persisted在電腦中一直是返回false，但是在手機(jī)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();
             }
        }
    }

通過上面代碼發(fā)現(xiàn)在safari中第一次打開頁面的時(shí)候，有時(shí)候會(huì)出現(xiàn)閃屏效果。

添加如下代碼：

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

就沒有再出現(xiàn)閃屏效果了。

通過iframe方式阻止緩存

頁面中添加如下代碼

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

這種方式有待驗(yàn)證。

通過時(shí)間戳強(qiáng)制刷新方式

下面代碼是針對(duì)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()
{
    //計(jì)算時(shí)間超過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();
    }
}

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

CSS的編碼怎么轉(zhuǎn)換

css3點(diǎn)擊顯示漣漪特效

怎樣用canvas做出粒子噴泉?jiǎng)赢嫷男Ч?/a>

以上就是點(diǎn)擊瀏覽器的返回按鈕,就會(huì)刷新歷史頁面這個(gè)問題的解決方案的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！