Javascript 没有调整 iframe 的大小
Posted
技术标签:
【中文标题】Javascript 没有调整 iframe 的大小【英文标题】：Javascript is not resizing 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 的新大小，但它不会调整大小。 【参考方案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" ></iframe>
</div>或者，您可以设置cFrame.style.width/height
【讨论】：
【参考方案3】：既然您的标签中有 jQuery，我假设您愿意以 jQuery 的方式进行操作。
$('#myframe').width('900');
$('#myframe').height('800');
如果您不想使用 jQuery，@Dr.Flink 的答案是可行的方法。
【讨论】：
您的回答完全正确且很有帮助，只是认为另一个回答是用 js 术语回答的，这就是我决定这样做的方式。你是对的，我通常使用jquery。下次应该会。以上是关于Javascript 没有调整 iframe 的大小的主要内容，如果未能解决你的问题，请参考以下文章