Question

在我的网站上，我打开了一个包含IFRAME内容的fancybox。是否可以在其中单击链接时更新fancybox的大小？

例如，我最初将其设置为535px宽度，当点击特定链接时，我希望将fancybox调整为900px宽度。

知道如何实现这个目标吗？

谢谢！

Answer 1

我想我遇到了同样的问题，在我的情况下，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);
    });
  }
});

感谢Ian Hoar在此发帖： http://www.ianhoar.com/2011/08/25/jquery-and-fancybox-how-to-automatically-set-the-height-of-an-iframe-lightbox/

Answer 2

对于那些可能使用Fancybox 2来到这里的人：

这是适合我的代码

$(".iframe").fancybox({
                    autoSize: false,
                    autoDimensions: false,
                    width: 630,
                    height: 425,
                    fitToView: false,
                    padding: 0,
                    title: this.title,
                    href: $(this).attr('href'),
                    type: 'iframe'
                });

Answer 3

$('a', $('#youriframeID').contentDocument).bind('click', function() {
    preventDefault();
    $('#yourIframeID').attr('src', $(this).attr('href'));
    $('#yourIframeID').load(function() {
        $.fancybox.resize;
    });
});

如果在iframe中点击“a”，则会阻止默认事件。相反，我们更改了iframe的src。加载后，＃。fancybox.resize将根据内容自动调整fancybox的大小。这是一个想法，所以代码可能还不行。只是为了帮助您走上正确的轨道。

Answer 4

当 iFrame 内容重新加载时，Fancybox 3.3.1 会自动调整框的大小。参数为“preload”，默认为true。

见https://fancyapps.com/fancybox/3/docs/#iframe。

我测试了它并且它可以工作，但在最新的 Chrome 和 FF 中我仍然得到一个非常短的滚动条。 update() 函数似乎计算高度错误。它看起来像一个错误，我将它发布到了fancybox Github 存储库中。不幸的是，这个 repo 已经被废弃了一年。

Answer 5

这适用于fancyBox v2.1.4

$('#myid').fancybox({
    closeBtn    : false,
    padding     : 0,
    preload     : true,
    onUpdate    : function(){
        $.fancybox.update();
    }
});

Fancybox - 使用Iframe内容更新fancybox的大小？

5 个答案: