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

Question

我们有一些加载到fancybox iframe 中的jQuery 图表。最近有一些图对于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 设置。