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

Posted 2023-05-09

【中文标题】内容完成渲染后动态设置fancybox 2.1.4 iframe的高度

【英文标题】：Setting height of fancybox 2.1.4 iframe dynamically after contents finish rendering

【发布时间】：2015-04-24 22:46:18

【问题描述】：

我们有一些加载到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 使用所需的高度？这取决于图表，所以我不能在选项中设置它。

【参考方案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 设置。

【讨论】：

您的小提琴使用的是 2.1.5，但我更新了项目中的库。