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>

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

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/14819642/fancybox-stuck-loading-iframe-in-ie

标签

jquery

internet-explorer

iframe

fancybox

fancybox-2