点击iPhone Safari时,图像会消失



好的,奇怪的问题:

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

2) 单击任何团队图像以进入团队成员页面

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

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

我知道这个问题有点老了,但我正在寻找类似问题的解决方案,搜索后,我找到了解决方案。希望这可以帮助其他有同样问题的人。 问题是当你给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>';
}
}

这将检查页面返回,因为移动 Safari 使用 bfcache 并将您的图像重新加载到div 中。 希望这对 OP 或其他人有所帮助。

最新更新