2

ファンシーボックス1.3.1を使用しています。これで、正常に動作する Fancybox に iFrame をロードします。iFrame では、ユーザーはステップからステップへと進みます。あるステップで、コンテンツの高さが変わります。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>

overflow:hidden; で 2 つの高さスタイルを取得します。ここに見られるように：

<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-inner").height( h );
$("#fancybox-wrap").height( h+20 );
$.fancybox.center();

少しテストしますが、これでうまくいくと思います。ファンシーボックスが現在のページより高い場合はどうなりますか? ページのサイズは大きくなりますか？

4

1 に答える 1

4

以下のようなことができます。

 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-28T07:32:15.923 に答える