Fancybox stuck loading iframe in IE

Asked 11/2, 2013 at 19:45 Answered 12/2, 2013 at 8:46

Solved jquery internet-explorer iframe fancybox fancybox-2

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>

    $(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.

Letterhead answered 11/2, 2013 at 19:45 Comment(0)

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

Dhaulagiri answered 12/2, 2013 at 8:46 Comment(2)

Awesome, thanks. ditto, works like a charm. I was using fancybox 2.1.4, with JQuery 1.7.1 and tested against IE9 and IE10. – Midgard 6/8, 2013 at 11:24

"preload: false" fixes an issue with Android 4.1.2 stock browser (Mobile Safari) as well. Thanks! – Floria 9/2, 2015 at 13:53

-1

i just test your snippet code and it worked for me in ie 8 and chrome

i use resource files from:

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

code i used:

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

Estremadura answered 11/2, 2013 at 20:38 Comment(2)

I copy/pasted your code (and changed the pdf) and all I get is an error in the console: SCRIPT438: Object doesn't support property or method 'fancybox' – Letterhead 11/2, 2013 at 20:46

the OP is using fancybox v2.x – Dhaulagiri 12/2, 2013 at 8:36

Recommended topics

Hot tags