如何从内部更改iframe的大小？

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

的index.html

<html>
    <head>
        <title>Index</title>
    </head>
    <body>
        <iframe id="myframe" src="frame.html" width="100px" height="100px"></frame>
    </body>
</html>

frame.html

<html>
    <head>
        <title>IFrame</title>
        <script>
            document.width = 500;
            document.height = 500;
        </script>
    </head>
    <body>
        <h2>My IFrame</h2>
    </body>
</html>

3 个解决方案

#1

When you create an IFRAME the browser automatically adds a 'window' object for the IFRAME inside the 'window' object of main page.

当您创建IFRAME时，浏览器会自动在主页的“窗口”对象中为IFRAME添加“窗口”对象。

You need to change the size of the IFRAME instead 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');

#2

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>

#3

-1

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";

DEMO JSFIDDLE

DEMO JSFIDDLE

#1