Fancybox iframe动态调整大小

过了一段时间后，我仍然在调整FancyBox2的iframe高度时遇到问题。我在我父调用此：Fancybox 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();

来源

2013-01-14 Peter

尝试（子页面内）调用方法'$父fancybox.update（）'后的大小发生了变化。另外，'onUpdate'的格式应该是'onUpdate：function（）{...}';尝试在里面设置它：'this.height = $（'。fancybox-iframe'）。contents（）。find（'body'）。innerHeight（）;' – JFK

很高兴你找到你的答案，并感谢它。只是一个提示 - 为的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 +，火狐，Chrome

来源

2013-02-08 08:53:11 tabacitu

Fancybox iframe动态调整大小

回答

相关问题