Question

我有一个Fancybox（2），其内容为<embed src='some_pdf.pdf'/>，即

var embed = $("<embed></embed>"),
    pdf_url = "http://mysite.science.uottawa.ca/rsmith43/Zombies.pdf";

embed.attr('src', pdf_url);

$.fancybox.open(embed);

这是on jsFiddle。

我希望Fancybox能够自动将宽度调整为PDF大小（我应该注意，因为PDF包含横向或纵向页面，因此可能会有所不同），大约是窗口高度的90％。 / p>

不幸的是，到目前为止我提出的最好的是硬编码宽度，并设置嵌入高度，即

embed.attr('width', '900');
embed.attr('height', parseInt($(window).height() * 0.9, 10));

对于如何将Fancybox的大小调整为<embed>附带的PDF格式的任何想法，我将不胜感激。

我正在使用Chrome 15，理想情况下，我想要一个适用于最新版Chrome，Safari和Firefox的解决方案。

感谢您的阅读。

Answer 1

当Fancybox无法计算即将发布的内容的大小时（很可能会在对象元素中发生），那么它会使用其minWidth和minHeight默认设置。

尝试传递正确的<embed>标记属性，例如：

var embed = $("<embed></embed>"),
pdf_url = "http://mysite.science.uottawa.ca/rsmith43/Zombies.pdf";

embed.attr('src', pdf_url);
embed.attr('width', '100%');
embed.attr('height', '100%');
embed.attr('type', 'application/pdf');

并告诉fancybox不要使用其autoSize设置，因此它会使用来自<embed> width和height属性的值，如：

$.fancybox.open(embed,{
autoSize: false
});

这将解决问题，并将PDF查看器的大小调整为视口。

注意：如果您使用的是HTML5 <!DOCTYPE html>，我建议您将高度设置为99％，如：

embed.attr('height', '99%');

避免PDF查看器中的双垂直滚动条。这是因为HTML5初始化边距的方式。

展开Fancybox宽度以匹配<embed /> PDF

1 个答案: