Как установить размер iframe динамически - PullRequest
Новая
       21

Как установить размер iframe динамически

17 голосов
/ 06 сентября 2011

Как мне динамически устанавливать размеры iframe, чтобы размер был гибким для разных размеров области просмотра?

Например: 

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

В этом случае высота зависит от размера окна браузера. Он должен быть установлен динамически в зависимости от размера окна браузера.

При любом размере соотношение сторон iframe должно быть одинаковым. Как это можно сделать?

Ответы [ 4 ]

27 голосов
/ 06 сентября 2011

Если вы используете 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>
10 голосов
/ 06 сентября 2011

Не совсем уверен, что 300 означает?Мисс опечатка?Однако для фреймов было бы лучше использовать CSS :) - при импорте видео с YouTube я обнаружил, что он игнорирует встроенные объекты.

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

<iframe src="html_intro.asp" id="myFrame">
<p>Hi SOF</p>
</iframe>
2 голосов
/ 06 сентября 2011

Вы пробовали height="100%" в определении вашего iframe? Это похоже на то, что вы ищете, если вы добавите height:100% в css для «body» (если вы не сделаете, 100% будет «100% вашего контента»). РЕДАКТИРОВАТЬ: не делайте этого. Атрибут height (как и width) должен содержать целое число, а не строку.

0 голосов
/ 22 февраля 2018

Я считаю, что это работает лучше всего во всех браузерах и устройствах (ПК, таблицы и мобильные устройства). 

<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>
...