这是我的 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 链接的大小。但正如你所看到的，我的 id 为“mydiv”的 div 的样式宽度和高度是自动的。当我使窗口变大时，我的代码的宽度和高度也需要为 100% 全宽，div 的大小会增加，但 iframe 不会改变，因为它具有固定的大小。

我努力了

("style","border:none;overflow:hidden;width:100%;height:100%;")

("width")) + "width=100%&height=100%"

但它不能正常工作。要么 iframe 混乱，但无法正常工作。希望您理解我在这方面确实需要帮助。

如果我们谈论的是纯 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;';
}

我已经测试过代码JSFiddle。一探究竟。

我认为您过于关注 iFrame。你必须专注于你可以处理的事情。在这种情况下，尝试修改url属性不会做任何事情，因为这不是控制iframe宽度和高度。

该元素控制其自身的外观。因此，您必须使用 iFrame 提供的 CSS 或属性。在本例中，我选择通过 JavaScript 使用 CSS。

我没有提供 jQuery 或第 3 方解决方案，因为用户指定了 JavaScript，并且看起来他或她没有在整个代码中实现任何它。

但为了考虑这个想法，这里有一个 jQuery 解决方案：

$('#button').click(function () {
    $('#myFrame').css("cssText", "width: 600px !important; height: 600px !important;");
});

更干净的方法！