[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>
<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 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);
  }
</script>

<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
</iframe>

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.

https://github.com/davidjbradshaw/iframe-resizer

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
    $.receiveMessage(
        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:

$(function(){

    // 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);

    $.postMessage(
        $('body').outerHeight( true ) + 'px',
        '*',
        target
    );

});

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:

<?php
            if(isset($_GET['html'])) $blogpagehtml = file_get_contents(urldecode($_GET['html']));
            else $blogpagehtml = file_get_contents('http://r****d.wordpress.com/');
            $doc = new DOMDocument();
            libxml_use_internal_errors(true);
            $doc->loadHTML($blogpagehtml);
            libxml_use_internal_errors(false);
            $anchors = $doc->getElementsByTagName("a");
            foreach($anchors as $anchor) {
                 $anchorlink=$anchor->getAttribute("href");
                 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);
            file_put_contents('tempblog'.$token.'.html',$newblogpagehtml);


?>

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

Source: stackoverflow.com

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

Webpage limitations when wrapped inside an IFrame?

Youtube embed: Unsafe JavaScript attempt to access frame

how to get iframe to fill entire page 100% and top:4px?

Getting Contents of Iframe with Pure JavaScript

How do I set the src to an iframe with jQuery?

Magnific Popup - add additional class to iframe

xhttp is not defined when using ajax calls into an iframe

What CSP child iframe inherits from its parent?

iFrame isolation

Show page differently (css) if within iframe