是否可以在 IE8 中使用 fancybox 2.1 打开 PDF？答案

【问题标题】：Is it possible to open a PDF with fancybox 2.1 in IE8?是否可以在 IE8 中使用 fancybox 2.1 打开 PDF？
【发布时间】：2012-10-01 21:46:17
【问题描述】：

我在一个托管大量 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 中，第一个链接的微调器出现并挂起。对于后两个，会出现一个花式框弹出窗口，但它是空的。我做错了什么？

【问题讨论】：

标签： jquery internet-explorer fancybox fancybox-2

【解决方案1】：

当然可以，对于这种类型的 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 尽管如此，对于某些场景，嵌入可能是一个合适的解决方案。

【讨论】：

顺便说一句，为什么我尝试过的其他方法都不起作用？这里的幕后发生了什么？
在幕后，我们正在构建一个embed html 标签（因此是type: 'html'）并在其中传递可能的最佳 pdf 参数，此时我们启动了 fancybox，所以这就是为什么您只需要文件的名称为href。 Check this doc 了解更多。
html5 DOCTYPE 加上高度：99% 不起作用。我编辑了答案以包含 scrolling: false 确实有效。
@WillLanni ：不要编辑答案，而是制作相关的 cmets
嗨 @JFK 在 IE 中如何获得 100% 缩放

【解决方案2】：

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

【讨论】：