武漢兼職女:點擊瀏覽器或者手機返回按鈕，重新整理曆史頁面解決方案

標籤：清除   nload   nts   否則   inner   ati   cat   on()   else   

武漢兼職女:點擊瀏覽器或者手機返回按鈕，重新整理曆史頁面解決方案

我前面文章中寫了返回上一頁並重新整理頁面 的方式。這個是我們點擊某個按鈕，來進行操作的。但是假如我們不是點擊某個按鈕，而是直接點擊手機下面的返回按鈕或者瀏覽器內建返回按鈕，如何重新整理之前的曆史頁面呢？

應用情境
假如我們有如下頁面列表資訊頁面

enter image description here

點擊進入詳情頁面，在詳情頁面修改了資料。

enter image description here

通過曆史返回，再返回到列表資訊頁面，因為列表資訊是曆史返回的，還是預設顯示原來修改前的資料，要重新整理一下才是修改後的資料。那麼我們通過什麼方式可以點擊手機返回按鈕或者瀏覽器返回，就能重新整理之前曆史頁面中的資料呢？

相關知識
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() { });
就沒有再出現閃屏效果了。

4、通過iframe方式阻止緩衝

頁面中添加如下代碼

<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this prevents back forward cache
</iframe>
這種方式有待驗證。

5、清除緩衝方式

我之前部落格中也寫過清除瀏覽器緩衝的幾種方式，武漢兼職女www.rfwcom.com/forum-81-1.html但是這種方式，經過驗證，不起作用。

6、通過時間戳記強制重新整理方式

下面代碼是針對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();
}
}

武漢兼職女:點擊瀏覽器或者手機返回按鈕，重新整理曆史頁面解決方案