2012-08-16 110 views
34

我發現的問題與this question非常相似,只是桌面上的Safari似乎已解決了問題。本質上,問題是這樣的:當客戶端在移動Safari瀏覽器上瀏覽並且頁面在pagea.html上執行javascript函數時,導航到pageb.html,然後按返回按鈕返回到pagea.html,javascript函數當客戶端按下後退按鈕返回到pagea.html時將不會運行。它會跳過javascript調用。Mobile Safari後退按鈕

我已經嘗試了上述鏈接中提到的解決方案,但似乎沒有任何適用於移動Safari的解決方案。有沒有其他人遇到過這個錯誤?你是怎麼處理的呢?

+2

如果還沒有出現,您可能會嘗試在所有鏈接網址後添加'?'。例如:'href =「next.html」'變成'href =「next.html?」'。這會給Web瀏覽器提示頁面內容是動態的,並再次進入該頁面應該再次從服務器重新加載頁面。這也應該應用於外部腳本。例如:'src =「mylib.js」'變成'src =「mylib.js?」'。 – Jay 2012-09-18 06:52:22

回答

86

這是由back-forward cache造成的。它應該在用戶導航時保存頁面的完整狀態。當用戶使用後退按鈕瀏覽頁面時,可以非常快速地從緩存加載。這與僅緩存HTML代碼的普通緩存不同。

當頁面加載bfcache onload事件不會被觸發。相反,您可以檢查onpageshow事件的persisted屬性。它在初始頁面加載時設置爲false。當頁面從bfcache加載時,它被設置爲true。

window.onpageshow = function(event) { 
    if (event.persisted) { 
     alert("From back/forward cache."); 
    } 
}; 

由於某種原因,jQuery在事件中沒有這個屬性。你可以從原始事件中找到它。

$(window).bind("pageshow", function(event) { 
    if (event.originalEvent.persisted) { 
     alert("From back/forward cache."); 
    } 
}); 

快速解決這些問題的方法是在按下返回按鈕時重新加載頁面。但是,這會使後退/前進緩存所帶來的積極效果無效。

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

一點題外話,你可以看到很多人使用空onunload處理程序解決方案,提供的網頁。這從iOS5開始並沒有奏效。

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

應該指出的是,這個解決方案不再適用於當前版本的iOS(我相信我讀過的地方是任何超出5ish的地方)。 pageshow事件將觸發第一個後退/前進,並且不再爲該頁面歷史狀態啓動。 我發現超越的唯一可行的解​​決方案是利用popstate事件來識別後退/前進。 – Shiboe 2014-05-29 17:41:38

+1

這是自iOS5以來一直沒有工作的空onunload處理程序。上面的答案適用於iOS6。雖然不知道iOS7。稍後再測試一下。 – 2014-05-30 08:38:51

+0

這適用於iOS7,但如果關閉屏幕並再次打開屏幕,還具有刷新頁面的副作用。任何方式來解決這個問題? – Dave4988 2014-09-08 15:18:19