Question

为了不劫持其他帖子，我决定开始自己的帖子。我已经搞砸了几天，无法弄清楚如何让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();不会做任何事情。

全部谢谢！

Answer 1

首先，我希望你理解当你说“Fancybox iFrame”时你的意思，这意味着你正在使用fancybox的选项iframe打开外部html / php文件，要么将其设置为{{ 1}}在您的链接中，如：

class

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

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

其次，您需要注意fancybox $(".fancybox").fancybox({ width: 620, // or whatever heigh: 320, type: "iframe" });和v1.3.x的选项彼此不兼容。例如，您在脚本v2.x（fancybox v2.x）和fitToView（v1.3.x）中使用。如果您确实使用的是fancybox v2.x，则无法识别autoScale。

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

最后，在$.fancybox.update()模式下打开时，我认为“自动”调整fancybox的唯一可能（我应该说是“最简单”）方式是：

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

操作方法？

修改您的picssel.com文件，并将尺寸设置为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

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

Answer 2

我知道这是一个老话题，但我很肯定这会帮助其他人降落在这里。即使您无法控制iframe内容，也可以将fitToView参数保留为默认值（true），并在窗口调整大小时调用Fancybox update()方法：< / p>

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

在Fancybox中自动调整高度

2 个答案: