Resize Cross Domain Iframe Height [duplicate]

Question

I'm trying to change the iframe height parameter to the same px of the page being loaded within the iframe. The page that's being loaded in the iframe is coming from another domain.

Different pages will be loaded up inside of the iframe causing the height of the iframe content to change, So I will need to grab the iframe content height and apply it to the iframe height parameter.

Here a example of what im talking about: http://jsfiddle.net/R7Yz9/3/

<div class="site"><a href="http://amazon.com/" target="_top">Amazon </a></div> <div class="site"><a href="http://cnn.com/" target="_top">Cnn </a></div> <div class="site"><a href="http://wikipedia.org/" target="_top">Wikipedia </a></div> <iframe id="source" src="http://amazon.com/" frameborder="0" scrolling="no" width="100%" height="100%"></iframe> 

.

$(document).ready(function() {     var iframe = $( "#source" );     $( "a[target=_top]" ).click( function(){         iframe.attr( "src", this.href );         return false;     });  }); 

Answer 1

It is only possible to do this cross domain if you have access to implement JS on both domains. If you have that, then here is a little library that solves all the problems with sizing iFrames to their contained content.

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

It deals with the cross domain issue by using the post-message API, and also detects changes to the content of the iFrame in a few different ways.

Works in all modern browsers and IE8 upwards.