cross-domain iframe resizer?

Estoy buscando un buen script de cambio de tamaño de iframe entre dominios que ajuste su altura en función de su contenido. También tengo acceso a html / css para la fuente del iframe. ¿Hay alguno por ahí?

Si sus usuarios usan navegadores modernos, puede resolver esto fácilmente con postMessage en HTML5 . Aquí hay una solución rápida que funciona bien:

La página iframe:

< !DOCTYPE html>    

Got post?

Lots of stuff here which will be inside the iframe.

La página principal que contiene el iframe (y me gustaría saber su altura):

  
  

Al no haber encontrado una solución que tratara con todos los casos de uso diferentes para esto, terminé escribiendo una lib simple que admite ancho y alto, cambio de tamaño de contenido y múltiples iframes en una página.

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

EasyXDM puede hacer esto 🙂 Este blog pos t explica la esencia del mismo

El primer script en esta página, el que usa postMessage en HTML5, también funciona para iframes en dispositivos móviles, al redimensionar el iframe al contenido, por ejemplo, sindicar dominios cruzados, puede desplazarse fácilmente en iphones o android, de una manera que no es posible con iframes de lo contrario

Después de algunas investigaciones, terminé usando el mecanismo de paso de mensajes de html5 envuelto en un plugin jQuery que lo hace compatible con navegadores más antiguos usando varios métodos (algunos de ellos descritos en este hilo).

La solución final es muy simple.

En la página de host (principal):

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

En la página iframe:

 $(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 ); }); 

He probado esto en Chrome 13+, Firefox 3.6+, IE7, 8 y 9 en XP y W7, safari en OSX y W7. 😉

El siguiente código funcionó para mí:

 var iframe = document.getElementById(id); iframe.height = iframe.contentDocument.body.scrollHeight; 

Probado en Opera 11, IE 8 9, FF 8, Chrome 16

Tengo una solución completamente diferente para cambiar el tamaño del iframe entre dominios. Implica obtener una copia de la página de destino que colocará en su iframe, lo escribirá localmente, luego colocará esa copia en su iframe y cambiará el tamaño según el mismo acceso de dominio al dom dentro del marco.

un ejemplo sigue:

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