How can i change the size of an iframe from inside?

前端未结

关注

 3  1103

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 witho

相关标签:

3条回答

予麋鹿

2020-12-25 12:51

function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}

Another way using Javascript

document.getElementById("ifr").height= "500px";
document.getElementById("ifr").width= "500px";

DEMO JSFIDDLE

0 讨论(0)

南方客

2020-12-25 12:53

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):

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):

<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):

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

0 讨论(0)

挽巷

2020-12-25 12:58
When you create an IFRAME the browser automatically adds a 'window' object for the IFRAME inside the 'window' object of main page.

You need to change the size of the IFRAME instead of the size of the document.

Try this code:

For JavaScript:
```
window.parent.document.getElementById('myframe').width = '500px';
window.parent.document.getElementById('myframe').height = '500px';
```
And for jQuery:
```
$('#myframe', window.parent.document).width('500px');
$('#myframe', window.parent.document).height('500px');
```
0 讨论(0)
发布评论:

提交评论
- 加载中...