Menu
I'm looking for a good cross-domain iframe resizing script that adjusts its height based on its content. I have access to the html/css for the source of the iframe as well. Is there any out there?
797
iFrame Resizer V4. This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content. It provides a range of features to address the most common issues with using iFrames, these include: Height and width resizing of the iFrame to content size.
What you can do is set specific width and height to your iframe (for example these could be equal to your window dimensions) and then applying a scale transformation to it. The scale value will be the ratio between your window width and the dimension you wanted to set to your iframe.
If your users are on modern browsers, you can solve this quite easily with postMessage in HTML5. Here's a quick solution which works well:
The iframe page:
<!DOCTYPE html> <head> </head> <body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');"> <h3>Got post?</h3> <p>Lots of stuff here which will be inside the iframe.</p> </body> </html> The parent page which contains the iframe (and would like to know its height):
<script type="text/javascript"> function resizeCrossDomainIframe(id, other_domain) { var iframe = document.getElementById(id); window.addEventListener('message', function(event) { if (event.origin !== other_domain) return; // only accept messages from the specified domain if (isNaN(event.data)) return; // only accept something which can be parsed as a number var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar iframe.height = height + "px"; }, false); } </script> <iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');"> </iframe> 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
