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

【问题标题】：here's my javascript to resize iframe and need some edit这是我的 javascript 来调整 iframe 的大小并需要一些编辑
【发布时间】：2017-07-14 18:57:07
【问题描述】：

这是我的 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 jquery html css iframe

【解决方案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 或 3rd 方解决方案，因为用户指定了 JavaScript，而且看起来他或她没有在整个代码中实现任何它。

但为了娱乐，这里有一个 jQuery 解决方案：

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

更清洁的方法！

【讨论】：

非常感谢您的 ard 工作，但您的代码仅适用于调整 iframe 的大小，而不适用于链接。我知道你说过“尝试修改 url 属性不会做任何事情，因为这不是控制 iframe 宽度和高度的原因”但是亲爱的，我需要代码来调整链接大小，我的意思是这里 page.php?width=400&height=400 宽度和高度。因为 iframe 上的某些页面不会自动调整链接大小。就像你的视频一样，我只需要调整 iframe 的大小，不需要它的 src 链接。

【解决方案2】：

** 编辑 **

事实证明我完全误解了这个问题。您希望 IFrame 的内容填充 IFrame？我不认为你可以为所欲为。

如果您需要调整 IFrame 内的内容大小：

在 IFrame 内编辑页面的 CSS。
如果 IFrame 内容与您的父级具有相同的域名，那么您可以使用 javascript 访问其 DOM，并进行操作。

这些都不适用于您的代码示例。

我在 sn-p 中使用了一些 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>

【讨论】：

亲爱的你的代码工作但 src 链接不是完整的宽度和高度与 div。它的固定尺寸为 width=320&height=270
如果我做到了page.php?width=100%&height=100% 它不起作用
将 iframe url 更新为：page.php?width=100%&height=100% 不会对 iframe 做任何事情，它只会改变 iframe 内呈现的内容。将 iframe 上的样式设置为：style="none;overflow:hidden;width:100%;height:100%;"
但是兄弟，我必须让 iframe 的内容为 100% 的宽度和高度，我不明白你所说的渲染是什么意思
我想我完全误解了你的问题。我改变了我的答案

【解决方案3】：

根据内容处理 iframe 大小通常很复杂，我建议使用像 https://davidjbradshaw.github.io/iframe-resizer/ 这样的 3rd 方解决方案（我与它无关，但我已经使用过多次，完全没有问题） .

您可以尝试一下，看看是否适合您的需求。

希望对你有帮助

【讨论】：