点击iPhone Safari上的图片后，图片消失了。

Question

好的，有一个奇怪的问题：

1）在iPhone上（Safari浏览器）打开此链接：http://powellcreative.com/our-team/

2）点击任何一个团队成员的图片以进入其个人页面

3）点击浏览器的返回按钮

4）现在团队页面上的图片消失了

- TTUGoldFOX

---

我们的表单提交按钮也遇到了这个问题。有进展吗？ - Doug Wilson

Answer 1

我知道这个问题有点老了，但我在寻找解决类似问题的解决方案时搜索到了一个解决方法。希望这能帮助其他遇到同样问题的人。问题是当你给iOS一个像onmouseover或onmouseout之类的javascript事件时，它不喜欢它，主要是因为当你用手指“悬停”在iOS中的元素上时，实际上你是在点击它，所以这是我想出的解决方案，在iOS中似乎可以重新加载图片，打击后退按钮。

以下是解决方案：

确保所有图像都在自己独立的具有独特名称的div中。例如：

<div name="div1"><a href="dosomething"><img src="yourimage" onmouseover="javascript:this.src='yourimage2';" onmouseout="javascript:this.src='yourimage';"></a></div> 

在您页面的JavaScript头部分中，您需要插入以下内容：

window.onpageshow = 
function(event){
if (event.persisted){
//for every div and image you want changed back you can add a loop here to change all at once or just one div by name//
document.getElementById('div1').innerHTML = '<a href="dosomething"><img src="yourimage" onmouseover="this.src="yourimage2";" onmouseout="this.src="yourimage";"></a>';
}
}

这将检查页面是否后退，因为Mobile Safari使用bfcache并重新加载您的图像到div中。希望这可以帮助OP或其他人。

- Lawrence Becker