Question

一段时间后，我仍然遇到在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();

Answer 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

Fancybox iframe动态调整大小

1 个答案: