这是我调整iframe大小的javascript，需要一些编辑 [英] here's my javascript to resize iframe and need some edit
问题描述
这是我的iframe，它位于带按钮的div中
Here's my iframe it's inside a div with button
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没有改变，因为它有固定的大小。
What I need here is my code works it will change the size of iframe and its src link is size. But as you see, my div with id of "mydiv" has style width and height is auto. What I need my code also to be 100% full width on width and height when I make window larger that div is size increase but iframe doesn't change because it has fixed size.
我试过
("style","border:none;overflow:hidden;width:100%;height:100%;")
("width")) + "width=100%&height=100%"
但它无法正常工作。 iframe都搞砸了，但是不能正常工作。希望你理解我真的需要帮助。
but it doesn't work correctly. Either iframe is messed up, but doesn't work right. Hope you understand I really need help in this.
推荐答案
**编辑**
事实证明我完全误解了这个问题。您希望IFrame的内容填充IFrame吗？我认为你不能做你想做的事。
It turns out I did completely misunderstand the question. You wish the content of the IFrame to fill the IFrame? I don't think you can do what you want.
如果你需要调整IFrame中的内容：
If you need to resize the content inside an IFrame:
- 编辑IFrame内页面的CSS。
- 如果IFrame内容与您的父级具有相同的域名，则可以使用javascript访问其DOM，并进行操作。
但这些都不适用于您的代码示例。
Neither of these work for your code example though.
我在片段中使用了一些CSS3，使内容看起来像大。也许这样的事情有帮助吗？
I've played around with some CSS3 in the snippet which makes the content look larger. Maybe something like this could help?
<!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>
这篇关于这是我调整iframe大小的javascript，需要一些编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
