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.

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


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

Need Your Help

Set Android app version using Gradle

android android-studio gradle android-gradle build.gradle

I'm trying to use Gradle to set app's name. Please, look at this snippet of build.gradle:

Is there a neater linq way to 'Union' a single item?

c# linq union

If I have two sequences and I want to process them both together, I can union them and away we go.