jQuery Fancybox - 用 Iframe 内容更新fancybox 的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5389927/
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
Fancybox - Updating size of fancybox with Iframe content?
提问by Probocop
On my site I open up a fancybox containing IFRAME content. Is it possible to update the size of the fancybox when a link is clicked within it?
在我的网站上，我打开了一个包含 IFRAME 内容的花式框。当点击其中的链接时，是否可以更新fancybox的大小？
For example, I have it set to 535px width initially, when a specific link is clicked I'd like the fancybox to resize to 900px width.
例如，我最初将其设置为 535px 宽度，当单击特定链接时，我希望fancybox 将其大小调整为 900px 宽度。
Any idea how I can achieve this?
知道我如何实现这一目标吗？
Thanks!
谢谢！
回答by why.you.and.i
I think I just have the same problem and in my case, fancybox.resize didn't work but this worked for me:
我想我只是遇到了同样的问题，就我而言，fancybox.resize 不起作用，但这对我有用：
$("#lightbox").fancybox({
'hideOnContentClick' : true,
'width' : 500,
'type' : 'iframe',
'padding' : 35,
'onComplete' : function() {
$('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
$('#fancybox-content').height($(this).contents().find('body').height()+30);
});
}
});Credit to Ian Hoar to posting that here: http://www.ianhoar.com/2011/08/25/jquery-and-fancybox-how-to-automatically-set-the-height-of-an-iframe-lightbox/
感谢 Ian Hoar 在此处发布该内容：http: //www.ianhoar.com/2011/08/25/jquery-and-fancybox-how-to-automatically-set-the-height-of-an-iframe-lightbox /
回答by turtlepick
For those who might come here using Fancybox 2:
对于那些可能使用 Fancybox 2 来到这里的人：
This is the code that worked for me
这是对我有用的代码
$(".iframe").fancybox({
autoSize: false,
autoDimensions: false,
width: 630,
height: 425,
fitToView: false,
padding: 0,
title: this.title,
href: $(this).attr('href'),
type: 'iframe'
});
回答by rsplak
$('a', $('#youriframeID').contentDocument).bind('click', function() {
preventDefault();
$('#yourIframeID').attr('src', $(this).attr('href'));
$('#yourIframeID').load(function() {
$.fancybox.resize;
});
});
If an 'a' is clicked within your iframe, the default events will be blocked. Instead, we change the src of your iframe. When it's loaded, #.fancybox.resize will automatically resize the fancybox in respect to the content. This is an idea, so the code will probably not yet work. Just to help you get on the right track.
如果在 iframe 中单击“a”，则将阻止默认事件。相反，我们会更改您的 iframe 的 src。加载后，#.fancybox.resize 将根据内容自动调整fancybox 的大小。这是一个想法，所以代码可能还不能工作。只是为了帮助您走上正轨。
回答by Andrey
This works for me on fancyBox v2.1.4
这对我适用于fancyBox v2.1.4
$('#myid').fancybox({
closeBtn : false,
padding : 0,
preload : true,
onUpdate : function(){
$.fancybox.update();
}
});
