网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

解决iphone safari下后退按钮导致函数不执行的问题

关注我吧
 2016/6/9 17:27:51 阅读次数:2220

先还原问题,假设有两个页面A.htm(简写为A)和B.htm(简写为B),A部分代码如下:

<div><a href="B.html">跳转到B.htm</a></div>
<script type="text/javascript">
alert("小幻想,小幸福!");
</script>

B部分代码如下:

<div><a id="backPrev" href="javascript:history.go(-1);">返回</a></div>

在iphone safari浏览器下,第一次打开A,会弹出alert。点击A中的链接,跳转到B,当点击B中的【返回】按钮,跳转到A,A中的alert就不会弹出,而android下的浏览器,pc的safari、chrome等浏览器都会执行,这就让我陷入了困惑。google后,发现有人也遇到同样的问题,SO(stackoverflow.com)有人给了回答,如

window.onunload = function() {};

或者

<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">this prevents back forward cache</iframe>

或是苹果官方的强制去除页面缓存的方法: 如何避免页面(和cookies)在Safari中被缓存 尝试过都不解决问题。问了几个同事,他们没遇到过这样的问题,也不知所措。问题还要解决,就只得依靠自己了。功夫不负苦心人,经过一番探究,终于想到了一个方法,代码如下,还是很简洁的

$("#backPrev").attr("href","javascript:void(0);").click(function(){
    if (/(iPhone|iPad|iPod)/i.test(navigator.userAgent)) {             
            window.location.href = window.document.referrer;
    } else { window.history.go("-1"); }
});

这样问题就解决拉。如是大家对 document.referrer 不熟悉,请参考:https://developer.mozilla.org/en/DOM/document.referrer

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=784【解决iphone safari下后退按钮导致函数不执行的问题】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭