扩展 Fancybox 宽度以匹配 <embed> PDF答案

【问题标题】：Expand Fancybox width to match an <embed> PDF扩展 Fancybox 宽度以匹配 <embed> PDF
【发布时间】：2011-12-08 04:53:05
【问题描述】：

我有一个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% 的窗口高度。

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

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

对于如何将 Fancybox 的大小调整为包含在<embed> 中的 PDF 大小的任何想法，我将不胜感激。

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

感谢您的阅读。

【问题讨论】：

hmm 不知道您可以正确嵌入 PDF...您在所有浏览器中都测试过吗？
@Jakub：它适用于我们正在使用的浏览器。 :)

标签： jquery html embed fancybox

【解决方案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 3 中将如何处理？谢谢。