Fancybox 卡在 IE 中加载 iframe
Posted
技术标签:
【中文标题】Fancybox 卡在 IE 中加载 iframe【英文标题】:Fancybox stuck loading iframe in IE 【发布时间】: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>
JS
$(document).ready(function()
/* fancybox handler */
$('.fancybox-media').fancybox(
openEffect : 'none',
closeEffect : 'none',
autoSize: true,
type : 'iframe'
);
);
编辑:我也尝试升级 jQuery,但无济于事。
编辑:这是jsFiddle,非常简单,对我来说在 IE 中不起作用。
【问题讨论】:
【参考方案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以上是关于Fancybox 卡在 IE 中加载 iframe的主要内容,如果未能解决你的问题,请参考以下文章