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

Question

我不久前在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。然后尝试右键单击 - > 返回结果窗格并注意浏览器之间的不同行为 - FF 和 IE 会将您发送到上一个“打开器”页面，而 chrome 将重新加载打开器的次数与您单击 iframe 上的链接一样多.

如果没有解决方案，我也会对具有 iframe 选项和类似外观和感觉的 fancybox 的良好替代品感兴趣。

谢谢

Answer 1

问题在于浏览器以不同的方式管理history。据我所知，Opera 和 Safari 也出现了同样的问题。

hacky 解决方法是 catch 在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
        });