jQuery 在 beforeShow 函数中使用 iframe 的花式框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10769151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fancy box work with iframes in beforeShow function?
提问by roozbubu
Im trying to dynamically set some values of my Fancybox object based on information stored in tags inside of an iframe which fancy box is loading. the problem is, the only time i can seem to get the CORRECT values out of the content (iv tried virtually every callback combo possible) is on the afterShow method. this causes a jumpy transition of the width and height which are reset after it is shown.
我试图根据存储在 iframe 内的标签中的信息动态设置我的 Fancybox 对象的一些值，该 iframe 正在加载哪个花式框。问题是，我似乎可以从内容中获取正确值的唯一时间（iv 尝试了几乎所有可能的回调组合）是在 afterShow 方法上。这会导致宽度和高度的跳跃过渡，在显示后重置。
$('.fancybox').fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
autoSize:true,
afterShow : function() {
var fancy = this;
var h = $('.fancybox-iframe').contents().find('html').height();
var w = $('.fancybox-iframe').contents().find('html').width();
fancy.width = w;
fancy.height = (h+50);
}
});
nothing outside of the afterShow method gives me correct results, even beforeShow(which is what I am going for). Is there any callback/jquery combo that can achieve this before showing the fancy box? Thanks!
afterShow 方法之外的任何内容都不会给我正确的结果，即使是 beforeShow（这就是我想要的）。在显示花哨的框之前，是否有任何回调/jquery 组合可以实现这一点？谢谢！
回答by JFK
You could also use the beforeShowcallback option, but you may need to cancel all the transitions (set nextSpeedand prevSpeedto 0).
您也可以使用beforeShow回调选项，但您可能需要取消所有转换（设置nextSpeed和prevSpeed到0）。
The transition speed seems to be creating the jumping effect using the afterShowcallback or avoiding to get the correct value using the beforeShowcallback.
过渡速度似乎是使用afterShow回调创建跳跃效果或避免使用回调获得正确的值beforeShow。
You may also need to update to fancybox version v2.0.6.
您可能还需要更新到fancybox 版本v2.0.6。
Additionally, you could also simplify your script without using external variables like:
此外，您还可以在不使用外部变量的情况下简化脚本，例如：
$(document).ready(function() {
$("a.fancybox").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
fitToView: false,
nextSpeed: 0, //important
prevSpeed: 0, //important
beforeShow: function(){
// added 50px to avoid scrollbars inside fancybox
this.width = ($('.fancybox-iframe').contents().find('html').width())+50;
this.height = ($('.fancybox-iframe').contents().find('html').height())+50;
}
}); // fancybox
}); // ready
See DEMO here
