0

複数の fancybox iframe に同じセレクター クラスを再利用したいと考えています。ファンシーボックスへのiframeコンテンツのサイズ変更に関するSOのさまざまな投稿を見てきました。私が見たものはすべて機能するように見えましたが (私は現在、ここで JFK のソリューションを使用しています)、それを取得できないか、他のいくつかが私のページで機能します。firebug で「fancybox-iframe」クラスを調べたところ、「fancybox-type-iframe」クラスと表示されます。以下で使用しているコードの何が問題なのか、なぜ間違っているのか、それを修正する方法を教えてください。リンクされた回答、jsfiddles なども問題ありません。少量のコンテンツを含むファンシーボックスにはインラインを使用しましたが、ページには iframe を使用したいと考えています。ありがとう！

これが完全なコードです。

ファンシーボックスを開くためのこのリンクは、ドメイン内の別のページにあります

 <a href="thm12.html" class="openfb"></a>

fancybox に表示する HTML ページ

    <!DOCTYPE html >
    <html style="width:550px;height:350px;" >
    <head>
    <title>THM - Twelve</title>
    <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    <script src="../js/ui/jquery.ui.core.js"></script>
    <script src="../js/ui/jquery.ui.widget.js"></script>
    <script src="../js/ui/jquery.ui.mouse.js"></script>
    </script>    
    </head>    
    <body>

    <div class="thm-set">
       <p class="thm-set-title" >Start Settings</p>
  <form id="" class="default-set-thm" >


    <div class="thm-content" ><p>Lorem ipsum aenean tempus lacus vitae orci 
                        posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet.</p><input type="text" value="" placeholder="" /></div>


           <span class="buttons">
                <input type="submit" class="close-fancybox"  value=""/>
                    <input type="submit" class="save-fancybox" value=""  />           
                </span> 
           </form>   
       </div>
    </body>
    </html>

ファンシーボックスjsスクリプト

$(".openfb").fancybox({
    hideOnContentClick: false,
    type:'iframe',
    scrolling: 'no', 
    beforeShow: function(){
        this.width = ($('.fancybox-iframe').contents().find('html').width());
             alert("the width of this div is " + this.width);
        this.height = ($('.fancybox-iframe').contents().find('html').height());
    }
});

Chrome アラートの結果

JavaScriptアラート

Firefox アラートの結果

ここに画像の説明を入力

IE 9 アラートの結果:

ここに画像の説明を入力

4

1 に答える 1

0

ファンシーボックスに表示するページのタイプミスである可能性があります...この行：

<html style="width:550px;height:350px; >

... に終了引用符がstyle="..."ないため、そのタグから寸法を取得する方法がありません。

さらにコードを分析するための私のデモ。

于 2012-12-17T20:34:11.890 に答える