jquery - 关闭 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。然后尝试右键单击 -> 返回结果 Pane ，并注意浏览器之间的不同行为 - FF 和 IE 会将您发送到上一个“opener”页面，而 chrome 只会重新加载 opener，次数与您单击 iframe 上的链接的次数相同.

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

谢谢

Answer 1

问题在于浏览器以不同的方式管理历史记录。据我所知，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