resizer - resize iframe to fit content
cross-domain iframe resizer? (7)
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í?
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.
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 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
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
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>
<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>
La página principal que contiene el iframe (y me gustaría saber su altura):
<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>
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);
?>
<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>
EasyXDM puede hacer esto :) Este blog pos t explica la esencia del mismo