Question

我正在使用jquery进行开发，我偶然发现了下一个问题：我在主页面中添加了一个IFrame，我想从内部调整它们的大小。我尝试了一些想法但没有成功。

这是我的代码：

的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>

Answer 1

当您创建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');

Answer 2

如果两个页面都在同一个域上（如果您设置了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>

Answer 3

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

DEMO JSFIDDLE

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

3 个答案: