gpt4 book ai didi

jquery - Fancybox iframe 动态调整大小

转载 作者:行者123 更新时间:2023-12-03 22:52:36 24 4
gpt4 key购买 nike

一段时间后,我在 FancyBox2 中调整 iframe 高度时仍然遇到问题。我在我的 parent 中这样称呼:

$(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();

最佳答案

很高兴您找到了答案,并感谢您。只是一个提示 - 对于 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

关于jquery - Fancybox iframe 动态调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14317458/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com