这是我的javascript调整iframe大小，需要一些编辑
这是我的iframe它在一个有按钮的div里面
function myFunction() {
var url =document.getElementById("myFrame").getAttribute("src");
var newUrl = url.substring(0,url.indexOf("width")) + "width=320&height=270";
document.getElementById("myFrame").setAttribute("src",newUrl);
document.getElementById("myFrame").setAttribute("style","border:none;overflow:hidden;width:320px;height:270px;");
} <div style="width:auto;height:auto;" id="mydiv">
<iframe id="myFrame" src="http://domain.com/page.php?width=400&height=400" height="400" width="400"></iframe>
</div>
<button onclick="myFunction()">Change Size</button>这里我需要的是我的代码，它将改变iframe的大小，它的src链接是size。但正如您所看到的，id为“mydiv”的mydiv具有样式宽度，而高度是自动的。当我使窗口变大时，我需要我的代码在宽度和高度上都是100%全宽，div是大小增加的，但iframe并没有改变，因为它有固定的大小。
我已经试过了
("style","border:none;overflow:hidden;width:100%;height:100%;")
("width")) + "width=100%&height=100%"
但是它不能正常工作。无论是iframe是一团糟，但不能正常工作。希望你明白我真的需要帮助。
共有3个答案
根据内容处理iframe大小通常比较复杂，我建议使用第三方解决方案，如https://davidjbradshaw.github.io/iframe-resizer/（我和它没有关系，但我已经用过好几次了，一点问题也没有）。
你可以试一试，看看这是否符合你的需要。
希望这有帮助
**编辑**
原来我确实完全误解了这个问题。你希望IFrame的内容填满IFrame？我认为你不能做你想做的事。
如果您需要调整IFrame中的内容大小：
- 在IFrame中编辑页面的CSS
但这两种方法都不适用于您的代码示例。
我在代码片段中使用了一些CSS3，这使得内容看起来更大。也许这样的东西能帮上忙？
<!DOCTYPE html>
<html>
<head>
<style>
html, body { width: 100%; height: 100%; padding:0; margin:0; }
#div {
width: 600px;
height: 600px;
padding: 0;
}
#iframe {
width: 480px;
height: 480px;
border: 1px solid black;
transform: scale(1.25);
transform-origin: 0 0;
/* browser compatibility */
-webkit-transform: scale(1.25);
-webkit-transform-origin: 0 0;
-moz-transform: scale(1.25);
-moz-transform-origin: 0 0;
-o-transform: scale(1.25);
-o-transform-origin: 0 0;
-ms-zoom: 1.25;
}
</style>
</head>
<body>
<div id="div">
<iframe id="iframe" src="http://domain.com/page.php"></iframe><br />
</div>
<!-- uncomment to view the original size of the content inside the iframe -->
<!--
<iframe id="myFrame" src="http://domain.com/page.php?width=400&height=400" height="600" width="600"></iframe>
-->
</body>
</html>
如果我们讨论的是纯JavaScript，下面的示例应该可以很好地工作。
// Select your button
var button = document.getElementById("button");
// Button event listener for click
button.addEventListener("click", myFunction);
// Button function
function myFunction() {
document.getElementById("myFrame").style.cssText = 'width: 600px !important; height: 600px !important;';
}
我已经在JSFIDLE上测试了代码。过来看。
我觉得你太专注于iFrame了。你必须专注于你能处理的事情。在这种情况下，尝试修改url属性不会起任何作用，因为这不是控制iframe宽度和高度的因素。
元素控制自身的外观。所以您必须使用iFrame提供的CSS或属性。在本例中，我选择通过JavaScript使用CSS。
我没有提供jQuery或第三方解决方案，因为用户指定了JavaScript，看起来他或她没有在整个代码中实现任何JavaScript。
但为了让人愉快，这里有一个jQuery解决方案：
$('#button').click(function () {
$('#myFrame').css("cssText", "width: 600px !important; height: 600px !important;");
});
一个更干净的方法！
-
我似乎无法调整这个iframe的大小 为了简单起见，我没有包括几个包装div，因为它们只用于样式。然而，上面的两个外部div位于flexbox的div中，因此它们是水平显示的，而不是占据整个水平空间。我将内容div设置为100%的宽度，第一个div设置为固定宽度。如你所见，iframe也从硬编码的固定宽度/高度开始。还要注意，重置iframe的src在js函数中起作用，而不是宽度和高度。 谢谢你
-
问题内容： 我正在开发类似iGoogle的应用程序。使用iframe显示其他应用程序（在其他域上）的内容。 如何调整iframe的大小以适合iframe内容的高度？ 我试图破译Google使用的javascript，但它被混淆了，到目前为止，在网络上搜索毫无结果。 更新： 请注意，内容是从其他域加载的，因此适用同源策略。 问题答案： 我们遇到了这类问题，但与您的情况略有不同我们向其他域上的网站提供
-
我需要一个有2个IFRAME的布局，在屏幕上可以通过javascript切换而不刷新内容（它们只是改变位置），并且可以调整列的大小。在移动设备上，它们应该是100%宽度堆叠的。 此处绘制示例 [请参阅此处的codepen：][2][2]:https://codepen.io/az3l10/pen/vygvmep 我的问题是，由于DIV位置是绝对的，我不能调整列的大小，如果我改变了位置，我不能切换。
-
我一直在遵循以下教程来调整ec2实例根分区的大小。 教程中说，在新的附加卷实例启动后，通过运行命令resize2fs来调整根分区的大小，以便声明空闲大小，但我可以在不运行resize2fs的情况下看到调整了大小的根分区。 谢谢，
-
问题内容： 我需要让用户向我的JFrame中添加更多文本字段，以便一旦框架的大小超过其原始值，滚动窗格就会介入。由于我无法将JScrollPane添加到JFrame中以启用滚动，因此我决定将JPanel置于JFrame并将JPanel对象传递到JScrollPane构造函数。滚动现在可以正常工作，但是直到到达JPanel的边界为止。问题是JPanel的大小保持不变，并且不会动态扩展。发生的是我代码
-
问题内容： 调整浏览器窗口大小时，有什么方法可以调整jqGrid的大小？我已经尝试过这里描述的方法，但是该技术在IE7中不起作用。 问题答案： 作为后续措施： 由于不可靠，本文中显示的先前代码最终被放弃了。我现在按照jqGrid文档的建议使用以下API函数调整网格大小： 为了进行实际的大小调整，将实现以下逻辑的函数绑定到窗口的resize事件： 使用其父级的clientWidth和（如果不可用）o