cross-domain iframe resizer?
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?
Solution 1:
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>
Solution 2:
Having failed to find a solution that dealt with all the different use-cases for this I ended up writing a simple js lib that supports both width and height, resizing content and multiple iframes on one page.
https://github.com/davidjbradshaw/iframe-resizer
Solution 3:
EasyXDM can do just this :) This blog post explains the gist of it
Solution 4:
The first script on this page - the one using postMessage in HTML5 - also works for iframes on mobile - by resizing the iframe to the content - for example syndicating cross-domain - you can easily scroll in iphones or android, in a way that's not possible with iframes otherwise