在关闭fancybox iframe后，Chrome中的后退按钮无法正常工作 [英] Back button in Chrome doesn't work properly after closing an fancybox iframe

问题描述

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

<在Chrome中，我打开fancybox iframe，然后使用iframe页面上的链接导航，然后关闭fancybox。在关闭fancybox之后，为了返回，我需要点击返回按钮的次数，与点击iframe页面上的链接数量一样多。所以我想（在Chrome浏览器中，FF，IE工作正常）我在fancybox iframe上做的任何导航都记录在开门者的历史记录中，导致了一个非常奇怪的行为：当用户关闭fancybox并点击后退按钮时，同一页面会一遍又一遍地重新加载，直到超过iframe上的点击次数。

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

  $（＃link）。fancybox（{$ b $'autoDimensions'：true，
'width'：400， 
'height'：300，
'autoScale'：false，
'type'：'iframe'
}）; 
  

在fancybox iframe中打开网站，浏览3-4次点击，然后关闭iframe。然后在结果窗格中点击右键 - >返回并注意浏览器之间的不同行为--FIF和IE会将您发送到之前的开启者页面，而Chrome会重新加载开启者多次，因为您点击了iframe上的链接。

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

谢谢

解决方案

问题是浏览器管理历史以不同的方式。据我所知，Opera和Safari也显示出同样的问题。

hacky 解决方法是 catch >目前的 history.length 目前fancybox打开并在关闭后恢复它，如果浏览器匹配Chrome，Opera和Safari（我不知道任何其他浏览器但答案可以延长）

使用上面的代码，我会添加一些回调，如：

  var $ history; 
 $（＃link）。fancybox（{
 autoSize：true，// autoDimensions是v1.3.4的一个选项
 width：400，
 height：300，
 fitToView：false，// autoScale是v1.3.4的一个选项
类型：'iframe'，
 beforeLoad：function（）{
 $ history = window.history.length; //捕获当前历史记录
}，
 afterClose：function（）{
 if（navigator.userAgent.match（/（Chrome | Opera | Safari）/ gi））{
 var goTo = window.history.length  -  $ history; 
 window.history.go（-goTo）//恢复初始历史记录
} 
} 
}）; 
  

请参阅 JSFIDDLE

$ b 注意：这是fancybox v2.1.x

I posted the same question on fancybox github a while back but the issue could not be solved at the time, so I thought I'd give it another try here:

In Chrome, I open a fancybox iframe, then navigate using the links on the iframe page and then close the fancybox. After closing the fancybox, in order to go back, I need to click on back button as many times as the number of links I have clicked on the iframe page. So I guess that (in Chrome only - FF, IE work fine) any navigation I do on the fancybox iframe is recorded in the opener's history, resulting in a very strange behavior: when the user closes the fancybox and hits the back button, the same page reloads over and over until the number of clicks that were made on the iframe is exceeded.

Here is an example: http://jsfiddle.net/YjXr5/ and the code I'm using to open the fancybox

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

open the site in a fancybox iframe, navigate for 3-4 clicks and then close the iframe. Then try right click -> back on the Result pane and notice the different behavior between browsers - FF and IE will send you to the previous "opener" page while chrome will just reload the opener as many times as you have clicked links on the iframe.

If there is no solution to this, I'd also be interested in a good alternative of fancybox that has the iframe option and a similar look and feel.

Thanks

解决方案

The issue is that browsers manage history in different ways. As far as I can tell, Opera and Safari also show the same issue.

A hacky workaround is to catch the the current history.length at the moment fancybox opens and restore it after it closes if the browser matches either Chrome, Opera and Safari (I am not aware about any other browser but the answer can be extended though)

Using your code above, I would add some callbacks like :

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
        }
    }
});

See JSFIDDLE

NOTE : this is for fancybox v2.1.x

这篇关于在关闭fancybox iframe后，Chrome中的后退按钮无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！