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

Question

我们有一些 jQuery 图表加载到 fancybox iframe 中。最近有些图对于fancybox frame来说太高了，设计要求是没有滚动条除非高度超过700px并且图的上下空白不超过10px

我试过这个：

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

console.log() 正确显示了设计的高度。

但是fancybox仍然以默认高度显示。

在 console.log() 行放置一个断点，页面在 window 的顶部显示 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 设置。

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

Setting height of fancybox 2.1.4 iframe dynamically after contents finish rendering

javascript

iframe

jquery

fancybox

fancybox-2