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()正確顯示desigred高度。

但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設置。