iphone - 单击 iPhone Safari 时图像消失

Question

好吧，奇怪的问题:

1) 在 iPhone(Safari 浏览器)上转到此处:http://powellcreative.com/our-team/

2) 点击任一团队图片进入团队成员页面

3) 点击浏览器的后退按钮

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

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 head 部分:

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 或其他人。