2013-12-16 26 views
2

我在fancybox github上發佈了同樣的問題,但當時問題無法解決,所以我想我會再試一次:在關閉fancybox iframe後,Chrome中的後退按鈕無法正常工作

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

打開一個IFRAME的fancybox的網站,瀏覽了3-4次點擊,然後關閉的iframe的代碼。然後在結果窗格中點擊右鍵 - >返回並注意瀏覽器之間的不同行爲--FIF和IE會將您發送到之前的「開啓者」頁面,而Chrome會重新加載開啓者多次,因爲您點擊了iframe上的鏈接。

如果沒有解決方案,我也會對iframe選項和類似外觀的fancybox有個很好的選擇。

感謝

回答

1

的問題是,瀏覽器以不同的方式管理history。據我所知,Opera和Safari也顯示了同樣的問題。

一個哈克解決方法是的當前history.length此刻的fancybox中打開並關閉後,如果瀏覽器匹配任何瀏覽器,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

+0

這工作 - 它也可以使用在onStart和OnClose中回調的fancybox 1.3.4使用。我也用相當多的類似插件(例如,colorbox,lightbox等)測試了相同的情況,並且它們在Chrome中都有相同的問題行爲,但它們在IE,FF中正常工作。所以,直到真正的解決方案出現,這將做得很好。 – user3107861

相關問題