设置 iframe 大小的问题

Posted 2023-05-09

【中文标题】设置 iframe 大小的问题

【英文标题】：Problems setting iframe size

【发布时间】：2014-09-06 17:12:28

【问题描述】：

我尝试了很多在Fancybox 2.1.5 中设置iframe 大小的方法，主要是从*** 上的其他问题中获得的想法，但似乎没有任何效果。相反，在单击链接（动态生成）时，iframe 会打开非常小（300 x 150px）。我可以看到.fancybox-inner 具有正确的宽度和高度，但实际的 iframe 没有宽度/高度属性。链接的目标始终是 PDF，而不是 html 页面。

这是我的代码：

$(".homebox a.fancybox").click(function(e) 
        e.stopPropagation();
         $.fancybox(
            href: $(this).attr('href'),
            fitToView: false,
            autoSize: false,
            autoDimensions: false,
            width  : 600,
            height : 900,
            type   :'iframe'
         );
         e.preventDefault();
    );

非常感谢任何想法。 （注意，我使用e.stopPropagation() 是因为a.fancybox 链接实际上是另一个链接的子链接。）

【问题讨论】：

我通常也将minWidth和maxWidth设置为相同

谢谢皮特 -- 刚刚尝试过，但没有任何乐趣。

您是否尝试过将打开文档的正文尺寸设置为最小宽度和高度为 600x900？或确保您的 css 中有 .fancybox-iframe display: block; width: 100%; height: 100%;

的样式

那个 css 就在那里。我无法控制文档，但我应该说这些链接的目标始终是 PDF，而不是 HTML 页面。我会更新我的问题来提及这一点。

【参考方案1】：

我的猜测是，fancybox 在 iframe 内容完全加载之前计算尺寸，因此尺寸很小。

尝试在脚本中添加 iframe preload 设置为 false，例如：

$(".fancybox").on("click", function (e) 
    $.fancybox(
        href: this.href,
        fitToView: false,
        autoSize: false,
        // autoDimensions: false, // this is for fancybox v1.3.x
        width: 600,
        height: 900,
        type: 'iframe',
        iframe: 
            preload: false
        
    );
    return false;
);

见JSFIDDLE

PS。我不建议将链接嵌套在其他链接中。总会有更好的设计选项来解决您的需求。我的 5 美分

【讨论】：

感谢 JFK -- 但我已经在其他地方看到了 preload:false 的建议（可能来自您！）并尝试了它，没有任何乐趣。最后，我决定使用另一个效果很好的灯箱。