Fancybox - 如何更新包含Iframe内容的fancybox大小？

Question

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

例如，初始宽度设置为535像素，当单击特定链接时，我希望fancybox调整为900像素的宽度。

您有任何想法如何实现这一点吗？

谢谢！

- Probocop

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/

- why.you.and.i

---

Fancybox v2 版本：$('.fancybox').fancybox({ type: 'iframe', afterShow: function() { $('.fancybox-iframe').load(function() { $('.fancybox-inner').height($(this).contents().find('body').height()+30); }); } });注：该代码为 JavaScript/jQuery 代码，用于在网页中实现图片、视频等媒体文件的弹窗展示效果。 - Adrian van Vliet

@AdrianvanVliet 在哪里可以添加这段代码到Fancy Box的WordPress插件中？ - Imran Bughio

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'
                });

- turtlepick

---

设置高度和宽度对我很有用，即使autoSize为true。 - obie

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 以适应内容。这只是一个想法，所以代码可能还不能正常工作。只是为了帮助您走上正确的轨道。

- user657496

Answer 4

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

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

我测试过了，它可以工作，但在最新的 Chrome 和 FF 中仍然会出现非常短的滚动条。update() 函数似乎计算高度有误。这看起来像是一个 bug，我已经在 fancybox 的 Github 存储库中发布了它。不幸的是，该存储库已经被放弃一年了。

- needfulthing

Answer 5

这对我在fancyBox v2.1.4上有效。

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

- Andrey

---

将 $.fancybox.update() 添加到 onUpdate 事件处理程序中会导致无限循环，从而占用您的 CPU。这是一个实验，请在 console.log("update triggered"); 上方添加一行代码，然后使用浏览器控制台查看它被调用了多少次... - user692942