Question

我应该如何动态设置iframe的尺寸，因此对于不同的视口尺寸，尺寸是否灵活？

例如：

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

在这种情况下，根据浏览器的窗口大小，高度会有所不同。它应该根据浏览器窗口的大小动态设置。

在任何尺寸下，iframe纵横比应该相同。怎么办呢？

Answer 1

如果您使用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>

Answer 2

不太清楚300应该是什么意思？错字错字？但是对于iframe，最好使用CSS :) - 我在导入youtube视频时发现它忽略内联的东西。

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

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

Answer 3

您是否在iframe的定义中尝试了height="100%"？如果你在“body”的css中添加height:100%（如果你没有，100％将是“你的内容的100％”），它似乎就是你所寻求的。

编辑：不要这样做。 height属性（以及width属性）必须有一个整数作为值，而不是字符串。

Answer 4

我发现这适用于所有浏览器和设备（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>

Answer 5

最新的 css 规则将允许您直接使用视口，如下所示：

<iframe src="html_intro.asp" width="100vw" height="50vh">
  <p>Hi SOF</p>
</iframe>

我个人喜欢通过操作它们的父容器来调整 iframes：

<div class='iframe-parent'>
  <iframe src="html_intro.asp">
    <p>Hi SOF</p>
  </iframe>
</div>

现在是css：

.iframe-parent{
  width: 100vw;
  height: 50vh;
}

/* Expand to the entire container */
iframe{
  width: 100%;
  height: 100%;
}

Answer 6

高度因浏览器的窗口大小而异。应该根据浏览器窗口的大小动态设置

<!DOCTYPE html>
    <html>
    <body>
    
    <center><h2>Heading</h2></center>
    <center><p>Paragraph</p></center>
    
    <iframe src="url" height="600" width="1350" title="Enter Here"></iframe>
    
    </body>
    </html>

如何动态设置iframe大小

6 个答案: