内容完成渲染后动态设置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设置。