Html 如何从内部更改 iframe 的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18456498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i change the size of an iframe from inside?
提问by Jillian
I'm developing with jquery and I stumbled with the next problem: I added an IFrame inside the main page and I want to re size them from inside. I tried some ideas but without success.
我正在使用 jquery 进行开发，但遇到了下一个问题：我在主页中添加了一个 IFrame，我想从内部重新调整它们的大小。我尝试了一些想法，但没有成功。
Here is my code:
这是我的代码：
index.html
索引.html
<html>
<head>
<title>Index</title>
</head>
<body>
<iframe id="myframe" src="frame.html" width="100px" height="100px"></frame>
</body>
</html>
frame.html
框架.html
<html>
<head>
<title>IFrame</title>
<script>
document.width = 500;
document.height = 500;
</script>
</head>
<body>
<h2>My IFrame</h2>
</body>
</html>
回答by ifm
When you create an IFRAMEthe browser automatically adds a 'window'object for the IFRAME inside the 'window'object of main page.
当您创建一个时IFRAME，浏览器会自动'window'在'window'主页的对象内为 IFRAME添加一个对象。
You need to change the size of the IFRAMEinstead of the size of the document.
您需要更改 的大小IFRAME而不是文档的大小。
Try this code:
试试这个代码：
For JavaScript:
对于JavaScript：
window.parent.document.getElementById('myframe').width = '500px';
window.parent.document.getElementById('myframe').height = '500px';
And for jQuery:
而对于jQuery：
$('#myframe', window.parent.document).width('500px');
$('#myframe', window.parent.document).height('500px');
回答by Robert Benyi
If both pages are on the same domain (or even subdomain if you set document.domain maybe, did not test it) you can simply set it from javascript (or jQuery):
如果两个页面都在同一个域（或者甚至是子域，如果你设置了 document.domain，可能没有测试它）你可以简单地从 javascript（或 jQuery）设置它：
window.parent.document.getElementById('myframe').width = '500px';If you the pages are on different domains one solution would be to to add an event listener in the page that is calling the iFrame (credits to Marty Mulligan):
如果您的页面位于不同的域中，一种解决方案是在调用 iFrame 的页面中添加一个事件侦听器（归功于 Marty Mulligan）：
<html>
<head>
<title>Index</title>
<script src="/js/jquery/js/jquery.1.10.2.min.js"></script>
<script>
window.addEventListener('message', function(e) {
debugger;
var iframe = $("#myIframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
iframe.height(data);
break;
}
}, false);
</script>
</head>
<body>
<iframe id="myIframe" src="http://hofvanzeeland.net/frame.html" width="100px" height="100px" border="1"></frame>
</body>
</html>and trigger it from the iFrame content (frame.html):
并从 iFrame 内容 (frame.html) 触发它：
<html>
<head>
<title>IFrame</title>
<script>
function resize() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
</script>
</head>
<body>
<h2>My IFrame</h2>
<a href="#" onclick="resize()">Click me</a>
</body>
</html>回答by Vaibs_Cool
function setHeight() {
parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}
Another way using Javascript
另一种使用方式 Javascript
document.getElementById("ifr").height= "500px";
document.getElementById("ifr").width= "500px";
