Fancybox 中的自动高度调整大小答案

【问题标题】：Auto height resizing in FancyboxFancybox 中的自动高度调整大小
【发布时间】：2012-06-12 11:59:00
【问题描述】：

为了不劫持其他帖子，我决定创建自己的帖子。我已经搞砸了好几天，无法弄清楚如何让Fancybox iFrame 的高度自动调整为内容。我是这样称呼它的：

<script type="text/javascript">
    $(document).ready(function() {
        $(".various").fancybox()({
            maxWidth    : 713,
            minHeight   : 250,
            fitToView   : false,
            autoSize    : true,
            autoScale   : true,
            closeClick  : true,
            openEffect  : 'fade',
            closeEffect : 'fade',
            scrolling   : false,
            padding     : 0,
        });
    });
</script>

我认为设置 minHeight 和 autoScale 可以做到这一点，但事实并非如此。并且使用resize(); 什么都不做。

谢谢大家！

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

首先，我希望你明白你所说的“Fancybox iFrame”是什么意思，这意味着你正在使用fancybox的选项iframe打开一个外部html/php文件，或者将其设置为class内您的链接如下：

<a href="external.html" class="fancybox fancybox.iframe">open external file in fancybox</a>

（我假设您使用的是 fancybox v2.x，因为您的脚本中的选项）...或作为您自定义脚本中的一个选项：

$(".fancybox").fancybox({
 width: 620, // or whatever
 heigh: 320,
 type: "iframe"
});

其次，您需要注意，fancybox v1.3.x 和 v2.x 的选项彼此不兼容。例如，您在脚本中使用 fitToView (fancybox v2.x) 和 autoScale (v1.3.x)。如果你真的在使用 fancybox v2.x，autoScale 将无法识别。

第三，resize() 既不是 fancybox v1.3.x 或 v2.x 的选项。如果使用 v2.x，你应该使用$.fancybox.update()

最后，我认为在iframe 模式下打开fancybox 时，唯一可能（应该说是“最简单”）的方法是：

您应该可以控制要打开的external.html 页面（您应该拥有它并最终在同一个域中运行），这样您就可以添加fancybox 需要调整其大小的元素。其他不属于您的页面（例如picssel.com）不允许您自动调整 iframe 的大小（您可以手动调整它们的大小，但我不认为这是这个想法。）
您应该使用至少 2.0.6+ 的 fancybox

怎么做？

编辑您的external.html 文件并将尺寸设置为<html> 标签，如

<html lang="en" style="width: 800px; height: 400px;">

（您可能只想分配 height 属性）

然后使用回调选项beforeShow从iframe中获取维度，比如：

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

另外，fitToView 应设置为 false

查看https://stackoverflow.com/a/10776520/1055987 获取示例代码，其中还包含一个 DEMO。

【讨论】：

这是一个很好的打字回复。哦，花式盒
天哪，我一直很傻，不是吗！？我确实拥有所链接的内容，并且它位于同一位置。我也在使用从他们的网站下载的最新版本的 FancyBox。所以我要将 beforeShow 函数添加到我最初列出的代码中，并从该原始代码中删除宽度和高度属性？真的非常感谢！
@user1440201 例如，如果您在<html> 标记内向外部页面添加尺寸，那么我想您可以从代码中删除width 和height。让beforeShow 选项从iframe 获取大小。如果您认为这是正确答案，请不要忘记接受。 meta.stackexchange.com/a/5235

【解决方案2】：

我知道这是一个旧线程，但我很肯定这会帮助其他登陆这里的人。即使您无法控制 iframe 内容，也可以将 fitToView 参数保留为其默认值 (true) 并在调整窗口大小时调用 Fancybox update() 方法：

$(window).resize(function() { $.fancybox.update(); }); 但是，如果您还显示其他内容（例如图像 pdf 等），Fancybox 会自动将它们适应屏幕大小。在这种情况下，您当然可以为 iframe 和具有不同参数的图像初始化 fancybox。

【讨论】：