这是我的 javascript 来调整 iframe 的大小并需要一些编辑
Posted
技术标签:
【中文标题】这是我的 javascript 来调整 iframe 的大小并需要一些编辑【英文标题】：here's my javascript to resize iframe and need some edit 【发布时间】：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" ></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 都搞砸了，但不能正常工作。希望您理解我在这方面确实需要帮助。
【问题讨论】：
【参考方案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" ></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 方解决方案（我与它无关，但我已经使用过多次，完全没有问题） .
您可以尝试一下，看看是否适合您的需求。
希望对你有帮助
【讨论】：
以上是关于这是我的 javascript 来调整 iframe 的大小并需要一些编辑的主要内容，如果未能解决你的问题，请参考以下文章