2
我正在使用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高于当前页面会发生什么情况?页面大小会增加吗?