3

はい/いいえラジオ ボタンの質問への回答に応じてのみ表示される非表示フィールドを含むフォームがあります。

このフォームは、iframe を使用する複数の外部 Web サイトで使用されているため、別のドメインにあります。

これらの非表示フィールドが表示されているかどうかに応じて、iframe の高さを変更するにはどうすればよいですか。それらを表示/非表示にする方法は、別の scripts.js ファイルで jquery show/hide を使用することです。例えば

 $('#show').click(function(){
     $('#additional_fields').show('fast'); 
});

$('#hide').click(function(){
   $('#additional_fields').hide('fast'); 
});


<div id="additional_fields" style="display:none;"> hidden fields here
</div>

上記を含む iframe:

<iframe id="idIframe" src="http://websites.com/form.php" scrolling="no" height="1000" width="950" border="0"/>

アップデート

以下を使用して動作させることができました

$("#idIframe", top.document).css({ height: 1750 });

ただし、これは同じドメインを使用している場合にのみ機能します。

4

5 に答える 5

0

コンテンツをアニメーション化しながらiframeのサイズを変更する例を作成しました。私はあなたが私のコードであなたの解決策を見つけるべきだと思います：

http://algorhythm.de/tools/resizeable-iframe/

私のソリューションは、親とiframeに同じドメインを使用している場合にのみ機能します。これは、同一生成元ポリシーによるものです：http: //en.wikipedia.org/wiki/Same_origin_policy

于 2013-02-20T10:52:39.573 に答える
0

iframeIDに を指定し、jQueryheight関数を使用します。

$('#show').click(function(){
      var newHeight = $("#idIframe").height() + 50;
      $("#idIframe").height(newHeight);
      $('#additional_fields').show('fast');   
});

$('#hide').click(function(){
      var newHeight = $("#idIframe").height() - 50;
      $("#idIframe").height(newHeight);
    $('#additional_fields').hide('fast'); 
});

iframe の高さを変更する方法のデモンストレーション:

http://jsfiddle.net/aZxRn/

于 2013-02-18T13:43:29.443 に答える
0

唯一の方法は、postMessage( https://developer.mozilla.org/en-US/docs/DOM/window.postMessage ) を使用してコンテンツの高さを親ウィンドウに送信することだと思います。

問題は、親ページがメッセージをリッスンする必要があるため、これは、ある程度制御できる場合にのみ機能します。

于 2013-02-20T10:36:40.180 に答える