在 jQuery PopUp 中显示 PDF答案

【问题标题】：Displaying PDF's in jQuery PopUp在 jQuery PopUp 中显示 PDF
【发布时间】：2012-02-06 21:40:36
【问题描述】：

我想知道是否有人知道如何使用 Fancybox/Lightbox 等在 jQuery 中显示 PDF？我试过了，没有成功！

【问题讨论】：

如果你问我，这很烦人。有些人已将浏览器配置为下载 PDF 并在外部查看器中打开它们。对他们来说，灯箱只会显示一个空的 iframe。除此之外，复数是PDFs，而不是PDF's。
"我试过没有成功！" - 你尝试过什么？您能否展示一些代码并描述预期行为与观察到的行为？

【解决方案1】：

对于fancybox v1.3.x，有这个HTML：

<a class="pdf" href="sample.pdf">open pdf file</a>

使用这个脚本：

$(document).ready(function() {
 $(".pdf").click(function() {
  $.fancybox({
   'width': '70%', // or whatever
   'height': '90%',
   'autoDimensions': false,
   'content': '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
   'onClosed': function() {
     $("#fancybox-inner").empty();
   }
  });
  return false;
 }); // pdf 
}); // ready

当然，一定要先加载jQuery和fancybox的js和css文件

请注意，我在 <embed> 标记中设置了 height="99%"。如果您使用 HTML5 DCTYPE，它将避免双垂直滚动条。这是因为 HTML5 初始化边距的方式。

对于fancybox v2.x：如果您使用fancybox v2.x，您可以使用相同的脚本，但您不需要onClosed 选项，所以删除

'onClosed': function() {
 $("#fancybox-inner").empty();
}

来自脚本和content 选项之后的最后一个逗号。

另外将autoDimensions 字改为autoSize。

【讨论】：