2013-02-11 21 views
9

Sto riscontrando problemi nel caricare un PDF in un iframe in IE utilizzando fancybox. Quando clicco sul link, ottengo il caricatore gif e gira per sempre. Nessun errore nella console o nella pagina o qualcosa del genere. Il problema si verifica in tutte le versioni di IE. Tutti gli altri browser funzionano correttamente. Inoltre, il PDF è un file interno.Fancybox bloccato iframe in IE

Ecco parte del codice:


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

EDIT: Ho anche provato l'aggiornamento jQuery, senza alcun risultato.

MODIFICA: Ecco un jsFiddle, molto semplice e non funziona in IE per me.

risposta

19

Sembra che la disabilitazione di pre-caricamento di risolvere il problema con iframe e IE in modo da provare questo:

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

testato con fancybox v2.1.4 e IE7.

check JSFIDDLE

+1

Funziona come un fascino! Mille grazie, non ho trovato la soluzione da nessuna parte ... – Falantar014

+0

Fantastico, grazie. idem, funziona come un fascino. Stavo usando fancybox 2.1.4, con JQuery 1.7.1 e testato contro IE9 e IE10. – arcseldon

+2

"preload: false" risolve anche un problema con il browser azionario di Android 4.1.2 (Mobile Safari). Grazie! – Jurgen

-1

ho appena testare la tua frammento di codice e ha funzionato per me in IE 8 e Chrome

io uso dei file di risorse da:

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

codice utilizzato:

<!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

copio/incollato il codice (e ha cambiato il pdf) e tutto quello che ottiene è un errore nella console: SCRIPT438: L'oggetto non supporta la proprietà o il metodo 'fancybox' – Falantar014

+1

del PO sta usando fancybox v2.x – JFK

+0

non è dal codice, si tratta di fancybox js, il codice sopra lavorato –

Problemi correlati