Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fancybox stuck loading iframe in IE

I'm having problems loading a PDF in an iframe in IE using fancybox. When I click the link, I get the gif loader and it just spins forever. No errors in the console or on the page or anything like that. Problem occurs in all versions of IE. All other browsers work fine. Also, the PDF is an internal file.

Here's some of the code:


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: I have also tried upgrading jQuery, to no avail.

EDIT: Here is a jsFiddle, really simple and doesn't work in IE for me.

like image 885
Falantar014 Avatar asked Feb 11 '13 19:02

Falantar014


1 Answers

It seems like disabling pre-loading fixes the issue with iframes and IE so try this :

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

Tested with fancybox v2.1.4 and IE7.

Check JSFIDDLE

like image 55
JFK Avatar answered Oct 09 '22 16:10

JFK