我正在一个托管大量PDF文件的网站上工作,我想在fancybox(2.1)中打开它们进行预览。它适用于Chrome和Firefox。但它在IE8中不起作用。我已经尝试直接链接到PDF文件,链接到iframe,并链接到嵌入标签(以及其他更疯狂的东西)。我不能用谷歌来包装它们。这是一个演示该问题的页面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My Page</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fancybox.js?v=2.1.0"></script>
<link type="text/css" rel="stylesheet" media="screen" href="jquery.fancybox.css" />
</head>
<body style="background-color:grey">
<p><a href="mypdffile.pdf" class="fancypdf">a link</a> to a PDF file.</p>
<p><a href="#Frame1" class="fancy">a link</a> to an iframe with the pdf in it.</p>
<div style="display:none">
<iframe id="Frame1" src="mypdffile.pdf" style='width:100%;' height="600" frameborder="0" allowTransparency="true"></iframe>
</div>
<p><a class="fancy" href="#mypdf" >a link</a> to a pdf in an embed tab</p>
<div style="display:none"><div id="mypdf">
<embed src="mypdffile.pdf" type="application/pdf" width="640" height="480" />
</div></div>
<script type='text/javascript'>
$(function(){
$("a.fancypdf").fancybox({type:'iframe'});
$("a.fancy").fancybox();
});
</script>
</body>
</html>
每次结果都不同。在IE的第一个链接中,微调器出现并挂起。对于后两个,会出现一个fancybox弹出窗口,但它是空的。我做错了什么?
答案 0 :(得分:11)
对于这种类型的html,确实有可能:
<a class="fancypdf" href="path/file.pdf">open pdf</a>
你可以使用这段代码:
$(".fancypdf").click(function(){
$.fancybox({
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
}
}); //fancybox
return false;
}); //click
使用此方法,您无需在页面中嵌入PDF。
注意:如果您使用的是HTML5 <!DOCTYPE html>
,我建议您将height
设置为99%
,以避免出现双垂直滚动条PDF查看器。这是因为HTML5初始化边距的方式(请参阅上面代码中的content
选项,embed
标记)
更新:this DEMO来自其他帖子但使用fancybox v2.x打开PDF
编辑(2014年4月):
注意(向下选民)这个答案超过一年半。从那以后,浏览器及其插件已经发展,很可能更好的选择是在iframe中打开PDF。 Check this尽管如此,对于某些情况,嵌入可能是一种合适的解决方案。
答案 1 :(得分:0)
That worked for me in IE and Chrome (fancybox 2.x)
//HTML
<a class="fancybox fancybox.iframe" href="arquivo.pdf">Arquivo</a>
//SCRIPT
$('.fancybox').fancybox({
autoSize: false,
width: 960,
height: 500,
arrows: false,
nextClick: false,
iframe: {
preload: false // fixes issue with iframe and IE
},
helpers : {
overlay : {
css : {'background' : 'rgba(0, 0, 0, 0.85)'}
}
}
});