4

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

<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();什么也不做。

谢谢大家！

4

2 回答 2

19

首先，我希望你明白当你说“Fancybox iFrame”时你的意思，这意味着你正在使用fancybox的选项打开一个外部html/php文件iframe，或者将它设置为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()

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

  • 您应该可以控制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。

于 2012-06-12T18:07:53.560 回答
2

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

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

于 2014-12-12T01:21:03.280 回答