不久前我在 fancybox github 上发布了同样的问题,但当时问题无法解决,所以我想我在这里再试一次:
在 Chrome 中,我打开 fancybox iframe,然后使用 iframe 页面上的链接进行导航,然后关闭 fancybox。关闭 fancybox 后,为了返回,我需要点击后退按钮的次数与我在 iframe 页面上点击的链接的次数一样多。所以我猜想(仅在 Chrome 中 - FF、IE 工作正常)我在 fancybox iframe 上执行的任何导航都会记录在开启器的历史记录中,从而导致非常奇怪的行为:当用户关闭 fancybox 并点击后退按钮时,同一页面一遍又一遍地重新加载,直到超过 iframe 上的点击次数。
这是一个例子: http://jsfiddle.net/YjXr5/ 以及我用来打开 fancybox 的代码
$("#link").fancybox({
'autoDimensions' : true,
'width' : 400,
'height' : 300,
'autoScale' : false,
'type' : 'iframe'
});
在 fancybox iframe 中打开网站,导航并单击 3-4 次,然后关闭 iframe。然后尝试右键单击 -> 返回结果 Pane ,并注意浏览器之间的不同行为 - FF 和 IE 会将您发送到上一个“opener”页面,而 chrome 只会重新加载 opener,次数与您单击 iframe 上的链接的次数相同.
如果没有解决方案,我也会对 fancybox 的一个很好的替代方案感兴趣,它具有 iframe 选项和类似的外观。
谢谢
最佳答案
问题在于浏览器以不同的方式管理历史记录
。据我所知,Opera 和 Safari 也出现了同样的问题。
一个hacky解决方法是在fancybox打开时捕获当前的history.length
,并在浏览器关闭后恢复它匹配 Chrome、Opera 和 Safari(我不知道是否有其他浏览器,但答案可以扩展)
使用上面的代码,我会添加一些回调,例如:
var $history;
$("#link").fancybox({
autoSize: true, //autoDimensions is an option for v1.3.4
width: 400,
height: 300,
fitToView: false, //autoScale is an option for v1.3.4
type: 'iframe',
beforeLoad: function () {
$history = window.history.length; // catch current history
},
afterClose: function () {
if (navigator.userAgent.match(/(Chrome|Opera|Safari)/gi)) {
var goTo = window.history.length - $history;
window.history.go(-goTo) // restore initial history
}
}
});
参见 JSFIDDLE
注意:这是针对 fancybox v2.1.x
关于jquery - 关闭 fancybox iframe 后 Chrome 中的后退按钮无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20614966/