Javascript 没有调整 iframe 的大小答案

【问题标题】：Javascript is not resizing iframeJavascript 没有调整 iframe 的大小
【发布时间】：2016-07-25 11:02:26
【问题描述】：

我似乎无法让这个 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 位于一个 div 中，它是一个 flexbox，因此它们是水平显示的，而不是每个都占据整个水平空间。我将内容 div 设置为 100% 的宽度，并将第一个 div 设置为固定宽度。如您所见，iframe 也以硬编码的固定宽度/高度内联开始。另请注意，为 iframe 保留 src 在 js 函数中有效，而不是宽度和高度。

谢谢

【问题讨论】：

我认为我的情况就是这样。我将第二个 div 着色为灰色，以便我可以看到它有多少空间，并且它有足够的空间接受 iram 的新大小，但它不会调整大小。

标签： javascript jquery html css iframe

【解决方案1】：

您应该改为更改 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>

【讨论】：

哎呀，这当然是问题所在。让我试试看，但我相信它会奏效的。
我写了很多jQuery但是在js中这样做是因为它足够简单，但是忘记了dom对象的样式部分。谢谢。我会将这个标记为已接受，另一个标记为有帮助

【解决方案2】：

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

如果你删除了内联样式，它应该可以工作

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

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

【讨论】：

【解决方案3】：

既然您的标签中有 jQuery，我假设您愿意以 jQuery 的方式进行操作。

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

如果您不想使用 jQuery，@Dr.Flink 的答案是可行的方法。

【讨论】：

您的回答完全正确且很有帮助，只是认为另一个回答是用 js 术语回答的，这就是我决定这样做的方式。你是对的，我通常使用jquery。下次应该会。