Cambiar el tamaño de un iframe según el contenido
Estoy trabajando en una aplicación similar a iGoogle. El contenido de otras aplicaciones (en otros dominios) se muestra mediante iframes.
¿Cómo cambio el tamaño de los iframes para que se ajusten a la altura del contenido de los iframes?
Intenté descifrar el javascript que utiliza Google, pero está confuso y la búsqueda en la web ha sido infructuosa hasta ahora.
Actualización: tenga en cuenta que el contenido se carga desde otros dominios, por lo que se aplica la política del mismo origen .
Tuvimos este tipo de problema, pero ligeramente al revés de su situación: estábamos proporcionando contenido iframe a sitios en otros dominios, por lo que la misma política de origen también fue un problema. Después de pasar muchas horas buscando en Google, finalmente encontramos una solución (algo...) viable, que quizás puedas adaptar a tus necesidades.
Existe una forma de evitar la misma política de origen, pero requiere cambios tanto en el contenido iframe como en la página de marco, por lo que si no tiene la capacidad de solicitar cambios en ambos lados, este método no le será muy útil. Me temo que.
Hay una peculiaridad del navegador que nos permite eludir la misma política de origen: javascript puede comunicarse con páginas de su propio dominio o con páginas que tiene enmarcadas, pero nunca con páginas en las que está enmarcada, por ejemplo, si tiene:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.html
entonces home.htmlpuede comunicarse con framed.html(iframed) y helper.html(mismo dominio).
Communication options for each page:
+-------------------------+-----------+-------------+-------------+
| | home.html | framed.html | helper.html |
+-------------------------+-----------+-------------+-------------+
| www.foo.com/home.html | N/A | YES | YES |
| www.bar.net/framed.html | NO | N/A | YES |
| www.foo.com/helper.html | YES | YES | N/A |
+-------------------------+-----------+-------------+-------------+
framed.htmlpuede enviar mensajes a helper.html(iframed) pero no home.html (el niño no puede comunicarse entre dominios con el padre).
La clave aquí es que helper.htmlpuede recibir mensajes de framed.htmly también puede comunicarse con él home.html.
Básicamente, cuando framed.htmlse carga, calcula su propia altura, le dice a helper.html, que pasa el mensaje a home.html, quien luego puede cambiar el tamaño del iframe en el que framed.htmlse encuentra.
La forma más sencilla que encontramos de pasar mensajes de framed.htmla helper.htmlfue a través de un argumento de URL. Para ello, framed.htmldispone de un iframe con src=''el especificado. Cuando se onloaddispara, evalúa su propia altura y establece el src del iframe en este punto enhelper.html?height=N
Aquí hay una explicación de cómo lo maneja Facebook, ¡que puede ser un poco más clara que la mía anterior!
Código
En www.foo.com/home.html, se requiere el siguiente código javascript (por cierto, esto se puede cargar desde un archivo .js en cualquier dominio):
<script>
// Resize iframe to full height
function resizeIframe(height)
{
// "+60" is a general rule of thumb to allow for differences in
// IE & and FF height reporting, can be adjusted as required..
document.getElementById('frame_name_here').height = parseInt(height)+60;
}
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>
En www.bar.net/framed.html:
<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
function iframeResizePipe()
{
// What's the page height?
var height = document.body.scrollHeight;
// Going to 'pipe' the data to the parent through the helpframe..
var pipe = document.getElementById('helpframe');
// Cachebuster a precaution here to stop browser caching interfering
pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
}
</script>
Contenido de www.foo.com/helper.html:
<html>
<!--
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
-->
<body onload="parentIframeResize()">
<script>
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize()
{
var height = getParam('height');
// This works as our parent's parent is on our domain..
parent.parent.resizeIframe(height);
}
// Helper function, parse param from request string
function getParam( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script>
</body>
</html>
Si no necesita manejar contenido iframe de un dominio diferente, pruebe este código, resolverá el problema por completo y es simple:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>
