内容完成渲染后动态设置fancybox 2.1.4 iframe的高度

Question

我们有一些jQuery图加载到fancybox iframe中。 最近，这些图形中的一些对于fancybox框架而言过高，并且设计要求是除非高度超过700px并且图形上方和下方的空白不超过10px，否则没有滚动条。

我尝试了这个：

afterLoad : function(){
    //(...)
    $('.fancybox-inner').height($('.fancybox-iframe').contents().height() + 20);
    console.log($('.fancybox-inner').height());
}

console.log()正确显示指定的高度。

但是fancybox仍显示为默认高度。

在console.log()行上放置一个断点，页面将在窗口顶部显示fancybox框架，呈现的图形和具有正确高度的iframe。 当我释放调试器停止点时，fancybox将框架移到视口的中心，然后又回到默认高度（不在调试模式下，行为相同）。

如何使fancybox使用所需的高度？ 它取决于图形，因此我无法在选项中进行设置。

Answer 1

处理iframe会使事情有些困难，但是您可以尝试以下方法

$(document).ready(function () {
    $("a.fancybox").fancybox({
        type: "iframe",
        fitToView: false, // we need this
        autoSize: false, // and this
        maxWidth: "95%", // and this too
        beforeShow: function () {
            // find the inner height of the iframe contents
            var _newHeight = $(".fancybox-iframe").contents().find("html").innerHeight();
            this.height = _newHeight
        }
    }); // fancybox
}); // ready

注意，我们禁用fitToView和autoSize来设置首选height ，但是我们还需要设置maxWidth以避免fancybox超出屏幕尺寸。

还要注意，我们使用了beforeShow回调来设置this.height设置。