我正在使用 jquery 进行开发，但偶然发现了下一个问题：我在主页中添加了一个 IFrame，我想从内部调整它们的大小。我尝试了一些想法，但没有成功。
这是我的代码：
索引.html
<html>
<head>
<title>Index</title>
</head>
<body>
<iframe id="myframe" src="frame.html" width="100px" height="100px"></frame>
</body>
</html>
框架.html
<html>
<head>
<title>IFrame</title>
<script>
document.width = 500;
document.height = 500;
</script>
</head>
<body>
<h2>My IFrame</h2>
</body>
</html>
当您创建一个浏览器时，会自动在主页的对象内IFRAME添加一个'window'IFRAME对象。'window'
您需要更改IFRAME文档的大小而不是文档的大小。
试试这个代码：
对于JavaScript：
window.parent.document.getElementById('myframe').width = '500px';
window.parent.document.getElementById('myframe').height = '500px';
对于jQuery：
$('#myframe', window.parent.document).width('500px');
$('#myframe', window.parent.document).height('500px');
如果两个页面都在同一个域上（或者甚至是子域，如果你设置了 document.domain，没有测试它）你可以简单地从 javascript（或 jQuery）设置它：
window.parent.document.getElementById('myframe').width = '500px';如果您的页面位于不同的域中，一种解决方案是在调用 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>并从 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>function setHeight() {
parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}
另一种使用方式Javascript
document.getElementById("ifr").height= "500px";
document.getElementById("ifr").width= "500px";