更改花式框大小答案

【问题标题】：change fancybox size更改花式框大小
【发布时间】：2013-01-29 19:10:17
【问题描述】：

我展示了一个带有fancybox 的iframe。在 iframe 的 HTML 中，我这样做：

<body style="width: 650px; height: 430px;">

然后在 JS 中我执行以下操作：

$(".popup").fancybox({
    padding : 0,
    closeBtn : false,
    autoSize  : true,
    fitToView : false,    
    beforeShow: function()
    {
        this.width = ($("iframe").contents().find("body").width());
        this.height = ($("iframe").contents().find("body").height());
    }
});

“.popup”在哪里：

<a href="url.php" class="popup" data-fancybox-type="iframe">

如果在该 iframe 中我加载了另一个不同尺寸的 HTML（比如 400x150），fancybox 会调整它的高度而不是宽度。

任何帮助将不胜感激！

编辑 1：

我第一次运行花哨的盒子时，“.fancybox-inner” div 的样式是这样的

width: 650px; height: 430px;

然后，当我在 iframe 中导航时，“.fancybox-inner” div 的样式会像这样

width: 650px; height: 150px;

但是第二个 HTML body 标签是这样的

<body style="width: 400px; height: 150px;">

编辑 2：

来自此solution 的 cmets 在此 answer 中链接，表明这仅适用于高度

【问题讨论】：

你检查过 if ($("iframe").contents().find("body").width());给出一个合适的值？
@thaJeztah 我 console.log 并在第一次加载时只触发一次。
所以问题似乎不在于您无法设置尺寸（第一次有效），而是 beforeShow() 仅触发一次。您可以编辑/更新您的问题以澄清这一点。另外，我发现了这个，看起来很相似，也许有帮助：stackoverflow.com/questions/10769151/…
@thaJeztah 是的！那就是我有de beforeShow代码的地方。问题是，如果我在 iframe 内导航并且下一页具有不同的尺寸，fancybox 会以某种方式仅调整它的高度
你试过禁用 autoSize 吗？

标签： jquery fancybox-2

【解决方案1】：

好的，我最终使用了 fancybox 版本：2.1.4（2013 年 1 月 10 日，星期四）

在第 1231 行你会发现

origHeight = body.height();

然后添加这个

origWidth = body.width();

自动调整高度和宽度

【讨论】：

请务必将其勾选为未来观众的答案。
@Grinn：下次我会在发布之前调试 2000 行别人的代码。快点！如果它调整高度，人们会期望它也会调整宽度
当然。我只是说 - 为了可能遇到相同问题的 Stack Overflow 观众，您应该将您的答案标记为正确。
@Grinn：哦，对不起！我以为您是在责备我在检查插件代码之前发布我的答案。我读了它破旧的方式。请接受我诚挚的歉意！我之前没有将其标记为正确，因为我必须等待一天才能标记自己的回复
没问题。我想是这样的。