Question

我前一段时间在fancybox github上发布了同样的问题，但当时问题无法解决，所以我想在这里再试一次：

在Chrome中，我打开一个fancybox iframe，然后使用iframe页面上的链接进行导航，然后关闭fancybox。关闭fancybox后，为了返回，我需要点击后退按钮的次数与我在iframe页面上点击的链接数量相同。所以我想（仅限Chrome - FF，IE工作正常）我在fancybox上做的任何导航都会在开启者的历史记录中记录，导致一种非常奇怪的行为：当用户关闭fancybox并点击后退按钮时，同一页面会反复重新加载，直到超出iframe上的点击次数为止。

这是一个例子： http://jsfiddle.net/YjXr5/ 以及我用来打开fancybox的代码

$("#link").fancybox({
    'autoDimensions'    : true,
    'width'                         : 400,
    'height'                        : 300,
    'autoScale'                     : false,
    'type'              : 'iframe'
});

在fancybox iframe中打开网站，浏览3-4次点击，然后关闭iframe。然后尝试右键单击 - ＆gt;返回结果窗格并注意浏览器之间的不同行为 - FF和IE会将您发送到上一个“开启者”页面，而chrome只会重新加载开启者，就像您在iframe上点击链接一样多次。

如果没有解决方案，我也会对具有iframe选项和类似外观的fancybox的一个很好的选择感兴趣。

由于

Answer 1

问题是浏览器以不同方式管理history。据我所知，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

Answer 2

使用：（哈希：假）

演示

$('[data-fancybox="fancybox_image"]').fancybox({
        hash     : false
        });

关闭fancybox iframe后，Chrome中的后退按钮无法正常工作

2 个答案: