导航后退/卸载事件未触发时，iOS 5 Safari中的页面缓存问题 [英] Problems with Page Cache in iOS 5 Safari when navigating back / unload event not fired

问题描述

tl; dr - iOS 5上的Safari正在缓存，它正在打破我的网站。

tl;dr - Safari on iOS 5 is caching so hard, it is breaking my site.

我正在努力解决这个问题iOS 5中的Safari浏览器处理后向缓存，它们称为页面缓存。 此处描述的方式解释了行为很好。

I am struggling with the way the Safari browser in iOS 5 deals with back forward cache, which they call "Page Cache". The way it is described here explains the behavior very well.

很简单，页面缓存使得当你离开页面时我们暂停它，当你回来时我们按播放 。

Quite simply, the Page Cache makes it so when you leave a page we "pause" it and when you come back we press "play."

这会导致整个网站出现问题。使用后退按钮时，大多数其他浏览器会以加载状态显示页面。不是iOS 5上的Safari，它会显示您上次离开时​​的页面。一个简单的例子是禁用提交按钮。如果我使用Javascript来禁用提交按钮，然后提交表单，当您单击后面的提交按钮仍将被禁用。这在其他浏览器中是一个问题，包括Safari的桌面版本，但是通过将onload事件处理程序设置为空白函数来解决它。我相信这会告诉浏览器使缓存无效，因为在该函数中可能发生了一些重要的事情。这个hack似乎不适用于iOS 5上的Safari。

This is causing problems throughout my site. When using the back button, most other browsers will show you the page in the state it was loaded. Not Safari on iOS 5, it shows you the page as you last left it. A simple example would be the disabling of a submit button. If I use Javascript to disable a submit button, then submit a form, when you click back the submit button will still be disabled. This has been an issue in other browsers, including the desktop version of Safari, but it is solved by setting the onload event handler to a blank function. I believe this tells the browser to invalidate the cache because something important could have happened in that function. This hack does not seem to work for Safari on iOS 5.

以下问题归结为最基本的问题。加载test.html时，您会看到文本原始文本。当您单击该链接时，该文本将更改为更改文本 - 转发到下一页，然后在3秒内您将转发到test2.html。在所有浏览器中，所有这一切都很好。在所有其他浏览器中，当您单击后退按钮时，您将看到的文本是原始文本，但在Safari for iOS 5上，您将看到更改文本 - 转发到下一页。

Below is the issue boiled down to the bare essentials. When you load test.html you will see the text "Original Text". When you click the link, that text will change to "Changed text - forwarding to next page", then in 3 seconds you will be forwarded to test2.html. All is good up to this point in all browsers. In all other browsers, when you click the back button, the text you will see is "Original Text", but on Safari for iOS 5 you will see "Changed text - forwarding to next page".

有关如何处理此事的任何建议吗？

Any suggestions on how to deal with this?

这是一个简单的例子

test.html

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

test2.html

<div>Click back button</div>

这是使用表单发布的第二个示例。这是我的应用程序如何工作的一个简单示例。当您导航回formtest2.asp时，您应该看到已发布的表单值，而div文本应该是原始的。

formtest.asp

formtest.asp

<form method="post" action="formtest2.asp">
    Test: <input type="text" name="test"/>
    <input type="submit" value="Submit"/>
</form>

formtest2.asp

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

test2.html

<div>Click back button</div>

推荐答案

我也在寻找同一问题的答案。回到iOS 5中不会执行任何javascript，只是让页面处于离开或被重定向时的先前状态。

I was also looking for an answer to the same issue. Going back in iOS 5 does not execute any javascript and just leaves the page in the previous state it was when you left or were redirected.

尝试奇怪的onunloadhack发现在单击时是否存在跨浏览器的onload事件后退按钮？仅适用于iOS 4，而不适用于未按预期调用事件的iOS 5。 Nickolay在网络工具包中指出了名为pageshow和pagehide的新功能，它们比Giuseppe的例子更可靠。

Trying the weird "onunload" hack found in "Is there a cross-browser onload event when clicking the back button?" only worked for iOS 4, not iOS 5 which does not call the event as expected. Nickolay pointed out new functions on web-kit called "pageshow" and "pagehide" which are much more reliable than Giuseppe's example.

1. 你需要来自这篇文章的黑客：是否有跨浏览器加载单击后退按钮时的事件？这样在iOS 4中工作。



2. 使用此脚本使用新事件安全地检查页面是否已加载来自缓存并强制重新加载（避免URL检查和本地存储，还包括iPod），适用于iOS 5：

1. You need the hack from this article: "Is there a cross-browser onload event when clicking the back button?" for this to work in iOS 4.

2. Use this script which uses the new event to safely check if the page was loaded from cache and force a reload (avoiding URLs checks and local storage and also include iPods) for iOS 5:

<body onunload="">
...
<script type="text/javascript">
if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
  window.onpageshow = function(evt) {
    // If persisted then it is in the page cache, force a reload of the page.
    if (evt.persisted) {
      document.body.style.display = "none";
      location.reload();
    }
  };
}
</script>

这篇关于导航后退/卸载事件未触发时，iOS 5 Safari中的页面缓存问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！