javascript - 内容完成渲染后动态设置 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 将框架移动到视口(viewport)的中心，并且返回到默认高度(不在 Debug模式下时的行为相同)。

如何让 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以便能够设置首选高度，但是我们还需要设置 maxWidth 以避免 fancybox 超出屏幕尺寸。

另请注意，我们使用 beforeShow 回调来设置 this.height 设置。