每當內容發生變化時，更新fancybox的大小與iframe內容

我正在使用fancybox 1.3.1。現在我加載一個iFrame到Fancybox中，它工作正常。在iFrame中，用戶從一步到另一步。在某個步驟內容的高度發生變化。我如何更新iFrame的高度？每當內容發生變化時，更新fancybox的大小與iframe內容

我試過的jQuery的postMessage：

<script type="text/javascript" src="fileadmin/templates/lib/jquery.ba-postmessage.min.js"></script> 
<script type="text/javascript"> 
    $("#fancylink").fancybox({ 
     'type' : 'iframe', 
     'width' : 700, 
     'height' : 450, 
     'autoScale' : false 
    }); 
</script> 

<script type="text/javascript"> 
// set inital height 
var if_height = 450; 

$(document).ready(function() { 
    if($.receiveMessage){ 
     $.receiveMessage(function(e){ 

      // Get the height from the passsed data. 
      var h = Number(e.data.replace(/.*if_height=(\d+)(?:&|$)/, '$1')); 
      if (!isNaN(h) && h > 0 && h !== if_height) { 
       // Height has changed, update the iframe. 
       // checking min and max height 
       h=(h<450)?450:h; 
       $("#fancybox-frame").height(if_height = h); 
      } 
     }); 
    } 
}); 
</script>

我與溢出兩個天線高度樣式：隱藏;如下所示：

<div id="fancybox-inner" style="top: 10px; left: 10px; width: 700px; height: 450px; overflow: hidden;"> 
<iframe id="fancybox-frame" scrolling="auto" frameborder="0" src="https://www.externaldomain.com#http://www.internaldomain.com/page" hspace="0" name="fancybox-frame1347984635401" style="height: 1180px;">

因爲有更多的內容可用，但用戶不能滾動。所以無所事事比這更好。

我也

$('#element').fancybox({ 
    'onComplete' : function(){ 
     $.fancybox.resize(); 
    } 
});

嘗試過，但這裏沒有任何反應（不調整大小）。我認爲這次調整隻是在fancybox的第一次加載。但也是第一次沒有任何反應。

有沒有解決我的問題，或者我只能使用固定大小？

解決方案：

所以我添加下面的代碼，它似乎爲所需的工作：

$("#fancybox-inner").height(h); 
$("#fancybox-wrap").height(h+20); 
$.fancybox.center();

我將測試一點點，但我認爲這是可行的。如果fancybox高於當前頁面會發生什麼情況？頁面大小會增加嗎？

來源

2012-09-18 testing

你可以做下面的事情。

function updateMyFancyBox() { 
    $.fancybox.wrap.height($.fancybox.inner.height() + $('div#yourContentDiv').height());//increase fancybox height by adding your div height. 
    $.fancybox.update();//Fancybox will re-size according to new size, if it exceeds size limit, it will show scroll bar. 
}

來源

2012-11-28 07:32:15

每當內容發生變化時，更新fancybox的大小與iframe內容

回答

相關問題