Fancybox 卡在 IE 中加载 iframe答案

【问题标题】：Fancybox stuck loading iframe in IEFancybox 卡在 IE 中加载 iframe
【发布时间】：2013-01-26 23:56:22
【问题描述】：

我在使用 fancybox 在 IE 的 iframe 中加载 PDF 时遇到问题。当我点击链接时，我得到了 gif 加载器，它只是永远旋转。控制台或页面上或类似的东西上没有错误。所有版本的 IE 都会出现问题。所有其他浏览器都可以正常工作。此外，PDF 是内部文件。

以下是部分代码：

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

编辑：我也尝试升级 jQuery，但无济于事。

编辑：这是jsFiddle，非常简单，对我来说在 IE 中不起作用。

【问题讨论】：

标签： jquery internet-explorer iframe fancybox fancybox-2

【解决方案1】：

似乎禁用预加载可以解决 iframe 和 IE 的问题，所以试试这个：

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

用 fancybox v2.1.4 和 IE7 测试。

检查JSFIDDLE

【讨论】：

太棒了，谢谢。同上，就像一个魅力。我使用的是 fancybox 2.1.4，带有 JQuery 1.7.1 并针对 IE9 和 IE10 进行了测试。
"preload: false" 也修复了 Android 4.1.2 普通浏览器（Mobile Safari）的问题。谢谢！

【解决方案2】：

我只是测试了你的 sn-p 代码，它在 ie 8 和 chrome 中对我有用

我使用的资源文件来自：

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

我使用的代码：

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

【讨论】：

我复制/粘贴了您的代码（并更改了 pdf），我得到的只是控制台中的一个错误：SCRIPT438: Object doesn't support property or method 'fancybox'
OP 使用的是 fancybox v2.x