web-dev-qa-db-ja.com

iframeサイズを動的に設定する方法

Iframeのサイズを動的に設定するには、さまざまなビューポートサイズに合わせてサイズを柔軟に設定しますか？

例えば：

<iframe src="html_intro.asp" width="100%" height="300">
  <p>Hi SOF</p>
</iframe>

この場合、ブラウザのウィンドウサイズに応じて高さが異なります。ブラウザウィンドウのサイズに応じて動的に設定する必要があります。

どのサイズでも、iframeのアスペクト比は同じである必要があります。これをどのように行うことができますか？

htmliframeresize
20
Fero

Jqueryを使用する場合は、$(window).height();を使用して実行できます

<iframe src="html_intro.asp" width="100%" class="myIframe">
<p>Hi SOF</p>
</iframe>

<script type="text/javascript" language="javascript"> 
$('.myIframe').css('height', $(window).height()+'px');
</script>
28
Naveen Velaga

300の意味がわからない場合タイプミス？ただし、iframeの場合は、CSSを使用するのが最適です。

<style>
    #myFrame { width:100%; height:100%; }
</style>

<iframe src="html_intro.asp" id="myFrame">
<p>Hi SOF</p>
</iframe>
10
Graeme Leighfield

Iframeの定義でheight="100%"を試しましたか？ 「body」のcssにheight:100%を追加すると、求めていることを実行できるようです（そうしないと、100％が「コンテンツの100％」になります）。

編集：これをしないでください。 height属性（およびwidth属性）には、文字列ではなく、値として整数が必要です。

1
Lamecarlate

これは、すべてのブラウザーとデバイス（PC、テーブル、モバイル）で最適に機能することがわかりました。

<script type="text/javascript">
                      function iframeLoaded() {
                          var iFrameID = document.getElementById('idIframe');
                          if(iFrameID) {
                                // here you can make the height, I delete it first, then I make it again
                                iFrameID.height = "";
                                iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
                          }   
                      }
                    </script> 


<iframe id="idIframe" onload="iframeLoaded()" frameborder="0" src="yourpage.php" height="100%" width="100%" scrolling="no"></iframe>
0
Rocco The Taco