Fancybox iframe 动态调整大小

Posted 2023-05-09

【中文标题】Fancybox iframe 动态调整大小

【英文标题】：Fancybox iframe dynamically resize

【发布时间】：2012-12-28 08:30:44

【问题描述】：

一段时间后，我仍然无法在 FancyBox2 中调整 iframe 高度。 我在我的父母中这样称呼：

$(document).ready(function() 
    $('.fancybox').fancybox();      
    $('.showframe').fancybox(
        openEffect : 'elastic',
        closeEffect : 'elastic',
        beforeShow: function()
            this.width = ($('.fancybox-iframe').contents().find('body').width());
            this.height = ($('.fancybox-iframe').contents().find('body').height());
        , 
        afterClose : function() 
            location.reload();
            return;
        ,
        onUpdate :  autoHeight: true,
        helpers : 
            overlay : closeClick: false
        
    );
);

并且在打开 iframe 时它可以正常工作，但是在 iframe 中我有一个脚本允许用户上传图像并显示上传图像的预览，因此 iframe 的高度会发生变化（取决于上传的照片数量)，但 FancyBox 不会“调整高度”。我在我的“子”iframe 中使用它来触发调整大小：

...some functions here that handle image upload and image display...
parent.$.fancybox.scrollBox();

现在这仅适用于 Firefox，而 Chrome 和 IE 将显示滚动条而不是调整 iframe 高度的大小。有没有办法让这个跨浏览器兼容？

编辑：我让这段代码在所有浏览器中工作：

parent.$('.fancybox-inner').height($('#wrap').height()+20);

但问题是 iframe 不会居中（它只会调整高度，但不会在屏幕上重新居中）。我试过 parent.$.fancybox.center(); 和 parent.$.fancybox.reize(); 和 parent.$.fancybox.update(); 等等，但这只适用于 Firefox。

我发现（纯属幸运）这实际上适用于所有浏览器（甚至 IE8）：

parent.$('.fancybox-inner').height($('#wrap').height()+30);
parent.$.fancybox.reposition();

【问题讨论】：

在大小改变后尝试（在子页面内）调用方法parent.$.fancybox.update()。另外onUpdate的格式应该是onUpdate : function() ... ；尝试在其中设置：this.height = $('.fancybox-iframe').contents().find('body').innerHeight();

【参考方案1】：

很高兴您找到了答案，并感谢您。 只是一个提示 - 对于 Fancybox 1.3.4 用户来说是

parent.$.fancybox.center();

如果您还想重新调整宽度，则必须调整更多 div 的大小。我的完整调整大小如下所示：

// get iframe height and width
var current_height = document.getElementById('popup').offsetHeight;
var current_width = document.getElementById('popup').offsetWidth;

// resize height
parent.$('.fancybox-inner').height(current_height + 30);

// resize width
parent.$('#fancybox-outer').width(current_width + 30);
parent.$('#fancybox-wrap').width(current_width + 30);
parent.$('#fancybox-content').width(current_width + 30);
parent.$('.fancybox-inner').width(current_width + 30);

// center the thing - vertically and horizontally
parent.$.fancybox.center();
parent.$.fancybox.resize();

测试过 IE8+、Firefox、Chrome