Back button in Chrome doesn't work properly after closing an fancybox iframe

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/20614966/back-button-in-chrome-doesnt-work-properly-after-closing-an-fancybox-iframe

标签

jquery

google-chrome

fancybox