2013-02-11 66 views
9

我在使用fancybox在IE中的iframe中加載PDF時出現問題。當我點擊鏈接時,我得到了gif加載器,它只是永遠旋轉。控制檯或頁面上沒有錯誤或類似的東西。所有版本的IE都會出現問題。所有其他瀏覽器正常工作。另外,PDF是一個內部文件。Fancybox卡住在IE中加載iframe

下面是一些代碼:


HTML

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 

     <link rel="stylesheet" type="text/css" href=<?php echo base_url("templates/style1/css/jquery.fancybox.css") ?> /> 

     <script src=<?php echo base_url("js/jquery-1.7.2.min.js") ?> type="text/javascript"></script> 
     <script type="text/javascript" src="../js/jquery.fancybox.js"></script> 

    </head> 
    <body> 
     <a class="fancybox-media italic" href="../contract_docs/dummy.pdf" >Test Doc</a> 
    </body> 
</html> 

JS

$(document).ready(function(){ 
     /* fancybox handler */ 
     $('.fancybox-media').fancybox({ 
      openEffect : 'none', 
      closeEffect : 'none', 
      autoSize: true, 
      type : 'iframe' 
     }); 
    }); 

編輯:我也曾嘗試升級的jQuery,無濟於事。

編輯:這是一個jsFiddle,真的很簡單,並不適用於我的IE。

回答

19

好像禁用預加載修復該問題藉助iframe和IE這樣試試這個:

$(document).ready(function() { 
     /* fancybox handler */ 
     $('.fancybox-media').fancybox({ 
      openEffect: 'none', 
      closeEffect: 'none', 
      autoSize: true, 
      type: 'iframe', 
      iframe: { 
       preload: false // fixes issue with iframe and IE 
      } 
     }); 
    }); 

測試用的fancybox v2.1.4和IE7。

檢查JSFIDDLE

+1

工程就像一個魅力!非常感謝,無法找到解決方案... – Falantar014 2013-02-12 13:21:16

+0

真棒,謝謝。同上,像魅力一樣工作。我使用fancybox 2.1.4,使用JQuery 1.7.1並針對IE9和IE10進行測試。 – arcseldon 2013-08-06 11:24:47

+2

「preload:false」修復了Android 4.1.2股票瀏覽器(Mobile Safari)的問題。謝謝! – Jurgen 2015-02-09 13:53:30

-1

我只是測試你的代碼片段,它在IE 8和鉻

我使用的資源文件從工作對我來說:

的jQuery:http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js

JS:http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js

CSS: http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css

我使用過的代碼:

<!DOCTYPE html> 
<html lang="en" >  
    <head> 
     <meta charset="utf-8"> 

     <link rel="stylesheet" type="text/css" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" /> 

     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script> 
     <script> 
      $(document).ready(function(){ 
       /* fancybox handler */ 
       $('.fancybox-media').fancybox({ 
        openEffect : 'none', 
        closeEffect : 'none', 
        autoSize: true, 
        type : 'iframe' 
       }); 
      }); 
     </script> 

    </head> 
    <body> 
     <a class="fancybox-media italic" href="pdf.pdf" >Test Doc</a> 
    </body> 
</html> 


maybe clear browser cach fix it 
+0

我複製/粘貼你的代碼(和改變PDF)和我得到的是在控制檯中的錯誤:SCRIPT438:對象不支持屬性或方法「的fancybox」 – Falantar014 2013-02-11 20:46:45

+1

的OP正在使用fancybox v2.x – JFK 2013-02-12 08:36:21

+0

它不是代碼,它是關於fancybox js,上面的代碼工作 – 2013-02-12 11:19:47