[ACCEPTED]-cross-domain iframe resizer?-iframe-resizer

Accepted answer
Score: 35

If your users are on modern browsers, you 4 can solve this quite easily with postMessage in HTML5. Here's 3 a quick solution which works well:

The iframe 2 page:

<!DOCTYPE html>
<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>

The parent page which contains the 1 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);
<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
Score: 15

Having failed to find a solution that dealt 4 with all the different use-cases for this 3 I ended up writing a simple js lib that 2 supports both width and height, resizing 1 content and multiple iframes on one page.


Score: 1

EasyXDM can do just this :) This blog post explains the gist 1 of it

Score: 1

The first script on this page - the one 6 using postMessage in HTML5 - also works 5 for iframes on mobile - by resizing the 4 iframe to the content - for example syndicating 3 cross-domain - you can easily scroll in 2 iphones or android, in a way that's not 1 possible with iframes otherwise

Score: 0

After some research, I ended up using html5's 7 message passing mechanism wrapped in a jQuery pluging that 6 makes it compatible with older browsers 5 using various methods (some of them described 4 in this thread).

The end solution is very 3 simple.

On the host (parent) page:

// executes when a message is received from the iframe, to adjust 
// the iframe's height
        function( event ){
            $( 'my_iframe' ).css({
                height: event.data

// Please note this function could also verify event.origin and other security-related checks.

On the iframe page:


    // Sends a message to the parent window to tell it the height of the 
    // iframe's body

    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

        $('body').outerHeight( true ) + 'px',


I've tested this on Chrome 13+, Firefox 2 3.6+, IE7, 8 and 9 on XP and W7, safari 1 on OSX and W7. ;)

Score: 0

I have a whole different solution to cross 6 domain iframe resizing. It involves procuring 5 a copy of the target page that you will 4 put in your iframe, writing it locally, then 3 putting that copy into your iframe and resizing 2 based on same domain access to the dom inside 1 the frame.

an example follows:

            if(isset($_GET['html'])) $blogpagehtml = file_get_contents(urldecode($_GET['html']));
            else $blogpagehtml = file_get_contents('http://r****d.wordpress.com/');
            $doc = new DOMDocument();
            $anchors = $doc->getElementsByTagName("a");
            foreach($anchors as $anchor) {
                 if(strpos($anchorlink,"http://r****d.wordpress")===false) $anchor->setAttribute("target","_top");
                 else $anchor->setAttribute("href","formatimportedblog.php?html=".urlencode($anchorlink));        
            $newblogpagehtml = $doc->saveHTML();
            $token = rand(0,50);


            <iframe id='iframe1' style='width:970px;margin:0 auto;' src='tempblog<?php echo $token; ?>.html' frameborder="0" scrolling="no" onLoad="autoResize('iframe1');" height="5600"></iframe>

More Related questions