在jQuery PopUp中显示PDF

Question

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

Answer 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.