Question

我似乎无法让这个iframe重新调整大小

<body>
    <script type="text/javascript">
        function setIframe(src, iwidth, iheight) {
            var cFrame = document.getElementById('contentFrame');
            cFrame.src = src;
            cFrame.width = iwidth;
            cFrame.height = iheight;
        }
    </script>
    <div>Getting Started
         <div onclick="setIframe('login.aspx','800px','1000px');">Set Up</div>
    </div>
    <div id="content" style="background-color:#CCC"><iframe src="support.htm" id="contentFrame" style="width:400px;height:500px"></iframe>
    </div>

为简单起见，我没有包含一些包装div，因为它们仅用于样式。但是，上面的两个外部div位于一个flexbox的div中，因此它们是水平显示而不是每个占据整个水平空间。我将内容div设置为100％的宽度，并将第一个div设置为固定宽度。如您所见，iframe也以硬编码固定宽度/高度内联开始。另请注意，为iframe重新设置src在js函数中工作，而不是宽度和高度。

THX

Answer 1

您有内联样式覆盖宽度和高度属性。

如果删除内联样式，则应该可以使用

＆＃13;

<script type="text/javascript">
  function setIframe(src, iwidth, iheight) {
    var cFrame = document.getElementById('contentFrame');
    cFrame.src = src;
    cFrame.width = iwidth;
    cFrame.height = iheight;
  }
</script>
<div>Getting Started
  <div onclick="setIframe('login.aspx','800px','1000px');">Set Up</div>
</div>
<div id="content" style="background-color:#CCC">
  <iframe src="support.htm" id="contentFrame" width="400" height="500"></iframe>
</div>

＆＃13;

或者，您可以设置cFrame.style.width/height

Answer 2

您应该更改iframe的样式（CSS）：

    <script type="text/javascript">
        function setIframe(src, iwidth, iheight) {
            var cFrame = document.getElementById('contentFrame');
            cFrame.src = src;
            cFrame.style.width = iwidth + 'px';
            cFrame.style.height = iheight + 'px';
        }
    </script>
    <div>Getting Started
         <div onclick="setIframe('login.aspx','800px','1000px');">Set Up</div>
    </div>
    <div id="content" style="background-color:#CCC"><iframe src="support.htm" id="contentFrame" style="width:400px;height:500px"></iframe>
    </div>

Answer 3

由于你的标签中有jQuery，我假设你愿意以jQuery的方式做到这一点。

$('#myframe').width('900');
$('#myframe').height('800');

如果你不想使用jQuery，@ Dr.Flink的回答是要走的路。

Javascript没有调整iframe的大小

3 个答案: