tl; dr - iOS 5上的Safari緩存太難了,它正在破壞我的網站。iOS 5中的頁面緩存問題瀏覽器返回/卸載事件未觸發時
我很擔心iOS 5中的Safari瀏覽器處理後退前進緩存,他們稱之爲「頁面緩存」。描述方式here很好地解釋了這種行爲。
很簡單,頁面緩存使得它如此,當你離開一個頁面,我們「暫停」它,當你回來,我們按「播放」。
這是造成整個我的網站的問題。當使用後退按鈕時,大多數其他瀏覽器會向您顯示處於加載狀態的頁面。不是iOS 5上的Safari,它會向您顯示最後一次離開的頁面。一個簡單的例子就是禁用提交按鈕。如果我使用Javascript來禁用提交按鈕,然後提交表單,當你點擊提交按鈕時仍然會被禁用。這在其他瀏覽器(包括Safari的桌面版)中一直存在問題,但可以通過將onload事件處理程序設置爲空白函數來解決。我相信這告訴瀏覽器使緩存失效,因爲在該函數中可能發生了重要的事情。此攻擊似乎不適用於iOS 5上的Safari。
下面是將問題歸結爲裸露要領。當你加載test.html時,你會看到文本「原始文本」。當你點擊鏈接時,該文本將變爲「更改文本 - 轉發到下一頁」,然後在3秒內你將被轉發到test2.html。在所有瀏覽器中,所有這一切都很好。在所有其他瀏覽器中,當您單擊後退按鈕時,您將看到的文本是「原始文本」,但在Safari 5 for iOS 5中,您將看到「更改文本 - 轉發到下一頁」。
有關如何處理此問題的任何建議?
這是一個簡單的例子
的test.html
<script>
function changeText() {
el = document.getElementById("text");
el.innerHTML = "Changed text - forwarding to next page";
setTimeout("forward()",3000);
}
function forward() {
document.location.href = "test2.html";
}
</script>
<div id="text">Original Text</div>
<a href="Javascript:changeText()">Click Here</a>
<script>
window.onunload = function(){};
</script>
test2.html
<div>Click back button</div>
這是使用一個柱形式的第二個例子。這是我的應用如何工作的一個簡單例子。當您導航回formtest2.asp時,您應該看到發佈的表單值和div文本應該是原始的。
formtest.asp
<form method="post" action="formtest2.asp">
Test: <input type="text" name="test"/>
<input type="submit" value="Submit"/>
</form>
formtest2.asp
<script>
function changeText() {
el = document.getElementById("text");
el.innerHTML = "Changed text - forwarding to next page";
setTimeout("forward()",3000);
}
function forward() {
document.location.href = "test2.html";
}
</script>
<%
Dim test
test = Request("test")
Response.Write("Test value: " & test & "<br />")
%>
<div id="text">Original Text</div>
<a href="Javascript:changeText()">Click Here</a>
<script>
window.onunload = function(){};
</script>
test2.html
<div>Click back button</div>
只需要更多的信息。看起來好像我測試過的所有瀏覽器(Firefox,IE,Safari Desktop)都按照該順序觸發了頁面隱藏並卸載。 iOS 5上的Safari僅觸發頁面隱藏。 – Clarke
當打開一個新選項卡時,unload事件不會被觸發,只是頁面隱藏。當打開一個新標籤頁時,您會希望能夠回到舊標籤頁並按照您離開的頁面查看頁面。問題是,當我們在同一個標籤頁/窗口中從一個頁面導航到另一個頁面時,應該根據w3c觸發卸載事件,但不是。 http://www.w3.org/TR/DOM-Level-2-Events/events.html。 「卸載事件發生在DOM實現從窗口或框架移除文檔時,此事件對於BODY和FRAMESET元素有效。」 – Clarke
任何使用location.reload()的解決方案都會失敗,因爲對於此功能,ios 5上的Safari只會執行GET,而不是像所有其他瀏覽器一樣執行POST。 – Clarke