javascript - 这是我调整 iframe 大小并需要一些编辑的 javascript

Question

这是我的 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 的样式宽度和高度是自动的。当我使窗口变大时，div 的大小增加但 iframe 不会改变，因为它具有固定大小，我需要我的代码在宽度和高度上也为 100% 全宽。

我试过了

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

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

但它不能正常工作。要么 iframe 搞砸了，但不能正常工作。希望你明白我真的需要帮助。

Answer 1

如果我们讨论的是纯 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;");
});

更简洁的方法!