Menu
I am 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.
Here is my code:
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> 
837
Using the window. postMessage() method, we can safely communicate between the iframe and the parent window. That way, we can send a height value from the iframe to the parent window. Then, in the parent window, we can set a simple script to dynamically update the height of the iframe.
You can use the JavaScript contentWindow property to make an iFrame automatically adjust its height according to the contents inside it, so that no vertical scrollbar will appear.
Next, we put the <iframe> inside this box, making it fill the whole box. To size the <iframe> , we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%; . That's it: a full-width <iframe> with fixed aspect ratio. Enjoy.
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'); 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
