如何将fancybox调整为自定义创建的iframe大小答案

【问题标题】：How to make fancybox resize to custom created iframe size如何将fancybox调整为自定义创建的iframe大小
【发布时间】：2012-08-30 04:48:51
【问题描述】：

我想让 fancybox 尺寸与“手动创建”iframe 的内容大小相匹配。

我试过这个：http://jsfiddle.net/ystLD/3/

但它不起作用，现在我有点卡在这里。

有人知道怎么做吗？

谢谢。

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

“手动创建”iframe 的缺点是，fancybox 并不真正知道 type 的内容正在处理什么。我宁愿用type: "iframe" 选项打开fancybox。

然后，我认为您可以根据iframe 的内容重新调整fancybox 大小的唯一方法是硬编码在iframe 中打开的页面内的尺寸，或者在html 中，@ 987654329@ 或类似的包装容器

<html style="width: 800px; height: 650px;">

那么您可以使用beforeShow 回调来获取iframe 的尺寸，例如

  beforeShow: function(){
   this.width = $('.fancybox-iframe').contents().find('html').width();
   this.height = $('.fancybox-iframe').contents().find('html').height();
  }

如果您不拥有打开的页面并且无法对其尺寸进行硬编码，您仍然可以尝试获取html 或body 标签的innerWidth() 和innerHeight()，但它可以是真的如您在此forked fiddle 中看到的那样有缺陷@

这是对其他人有用的答案https://stackoverflow.com/a/10776520/1055987

【讨论】：

真的很有用。一个警告。此 jQuery 代码忽略了元素样式的任何空格，但您可以将这些值添加回来以防止您的内容被截断。

【解决方案2】：

您可以将宽度和高度附加到 iframe 的属性，因为无论如何您都是手动创建的。

.attr({ name: 'blah', width: '500px', height: '500px' })

如果您想要与您正在获取的页面大小完全匹配的内容，那么这是一项非常乏味的任务，因为 iframe 非常类似于打开浏览器窗口。您必须通过分析结构以编程方式确定最宽 div 的大小。此外，您还必须确定页面是否使用响应式布局并为此使用特定大小。

【讨论】：