miércoles, 1 de agosto de 2007

Redimensionar IFRAME con Javascript

Hoy tuve una tarea que se salía un poco (poquito nada más) de mi campo, me pidieron que incluya un foro en un sitio, nada fuera de lo común pensé pero la cosa se complico cuando quise usar un iframe y salía un bendito scroll que le quitaba toda la estética a la página, indagué a un amigo diseñador sobre alguna propiedad en CSS o algún método para que el iframe tomara el alto de su contenido pero fue en vano, cada cosa que hacía era inútil, la cosa llegó a peores cuando Google no respondió mi interrogante (¿o es que habré perdido el toque para buscar?), felizmente husmeando entre tantos recursos que no solucionaron mi problema, encontré esta respuesta:

1.- Declaramos una función javascript como la siguiente:
function resizeIframe(idIframe)
{
var miIframe=document.getElementById(idIframe);
var alturaPagina=miIframe.contentWindow.document.body.scrollHeight+20;
miIframe.style.height=alturaPagina;
}

2.- Al iframe le colocamos el atributo onLoad="resizeIframe(this.id)"

Y listo, cada vez que el iframe se recargue, esa función redefinira su alto al del contenido más 20 pixeles (por si acaso se queda corto :p ).

La entrada original se encuentra aqui: http://www.livinbride.com/foro/showThread.php?id=1426#msg1426

Espero les sirva

22 comentarios:

Anónimo dijo...

muy bueno me ah servido de mucho ...gracias....

José Luis | ArangeL dijo...

¡MUCHAS GRACIAS!
Use google y me mostró tu solución ^^. Me has ayudado mucho. Tenía otro script pero era muchísimo más complejo y no muy compatibles con navegadores portátiles para PDA o consolas. Este sí. Gracias ^^.

Anónimo dijo...

Amigo haz solucionado una semana entera de la busqueda de una solucion en solo 30seg, La fuerza esta contigo... Sos un duuuuuro..!!!!

Anónimo dijo...

Pues me alegro mucho de que te sirviera. Y gracias por hacerme referencia :)

ljbustamante dijo...

Jesús, de hecho que me ha servido mucho, y apuesto que no solo a mí, muchas gracias.

Anónimo dijo...

Hey muy bueno el codigo. Nos ha salvado el culo in extremis.
Muchas gracias y feliz navidad!!

Martín Marilungo dijo...

Luis, muchas gracias por tu ayuda. Tengo otra duda a ver si me puedo explicar bien...
tengo 2 iframe con alto variable, uno dentro de otro... iframe A que en su interior esta el iframe B. El index.php tiene el iframe A. Dentro cuando cargo una pagina php, es decir la pagina que contiene el iFrame B, puedo seleccionar filtros de busqueda y presionar el boton BUSCAR que me muestra el resultado y me recarga el iframe B (el mismo en donde estoy parado) con el alto justo que necesito pero no logro que se actualize el iframe A con el largo del iframe B... como puedo referenciar al objeto Iframe A... no logro hacerlo con javascript... podrias ayudarme?
desde ya muchas gracias!

martin de argentina

ljbustamante dijo...

Hola Martin, gracias por tu comentario y tu pregunta, creo que podrias colocar la función de redimension en cada página que tenga un iframe que quieras redimensionar, y a cada iframe colocarle el onload llamando a la función. Como los iframes cargan páginas independientes, no deberias tener problemas con la redeclaración de funciones, de hecho yo lo hice así y me funcionó bien en IE 7 y en Firefox 2.

El proceso es el siguiente: el iframe más "interior", por decirlo de alguna manera, actualiza su alto y luego, el inmediatamente superior hace lo mismo, y luego el siguiente y asi hasta llegar al límite superior, pero para esto, cada página en la cadena debe tener declarada la función de redimensionamiento y cada tag iframe dentro de estas el atributo onload apuntando a la función.

Si quieres referenciar al iframe superior desde el interno (para agregar un enlace que recargue toda la página y no solo el iframe por ejemplo), lo puedes hacer con la siguiente función:

function redirectParent(Redir)
{
this.parent.location.href = Redir;
}

Lo más importante de la función es el this.parent que le indica a javascript que la acción a realizar será aplicada en el padre de la página actual, es por esto que esta función debe insertarse en la página que se carga en el iframe, el location.href, ya son propiedades habituales del objeto window, esta parte la puedes cambiar por lo que consideres conveniente.

Espero que te sirva y no dudes en preguntar acerca de cualquier duda en torno a la explicación, nuevamente gracias y mucha suerte.

Martín Marilungo dijo...

muchas gracias por tu tiempo y por tu ayuda luis! esta tarde lo pruebo y te cuento que tal me fue! saludos desde argentina! y gracias nuevamente.
Martín.-

José Rodríguez dijo...

Saludos Luis
He probado tu solución, pero me da un mensaje de error (acceso denegado) ya que la dirección del Iframe está en otro dominio. tienes idea de como hacerlo en ese caso.

Anónimo dijo...

excelente ayuda, sin embarco no consigo que funcione en firefox, que habrá pasado?
habré hecho algo mal...
quisiera saber si me pueden ayudar
gracias

annisse dijo...

primero que nada muchas gracias por la ayuda, tomé de base esta función, pero como en firefox no funciona y requería que funcionara en cualquier explorador, le hice unos ajustes...
espero les sirvan...

function resizeIframe( idIframe ) {
var miIframe = document.getElementById( idIframe );
if( miIframe.contentDocument ) { // firefox
alturaPagina = miIframe.contentDocument.height;
}
else { // IE y demás
alturaPagina = miIframe.contentWindow.document.body.scrollHeight;
}
miIframe.style.height = alturaPagina + 20 + "px";
}

Anónimo dijo...

wow loko va de lujo ahora. mil gracias!!!

ljbustamante dijo...

Eunice muchas gracias por la ayuda brindada, yo también espero de todo corazón que tu ayuda les sirva

entreparéntesis ( ! ) dijo...

Estimado: verdaderamente esta solución es grandiosa y está más que bien. El asunto es que apesar de las correciones que le hicieron después sigo sin poder hacerla funcionar para firefox (3 en este caso) Es decir agrega los 20px y no más, pero no me toma la medida del documento. en fin, estoy hace unas cuantas horas intentando, me gustaría saber si me puedes ayudar. Paso el código tal cual lo tengo en este instante.


function resizeIframe(menu) {
var miIframe = document.getElementById(menu);
if(miIframe.contentDocument) { // firefox
alturaPagina = miIframe.contentDocument.height;}
else { // IE y demás
alturaPagina = miIframe.contentWindow.document.body.scrollHeight;
}
miIframe.style.height = alturaPagina + 20 + "px";
}


-----
y su respectivo onLoad

iframe id="menu" name="menu" scrolling="no" frameborder="0" allowtransparency src="menu_home.html" onLoad="resizeIframe(this.id)">
iframe
------
a los iframe no los pongo como tags porque el blog no me lo acepta, pero eso está bien escrito en mi código.

Desde ya muchas gracias si me puedes o pueden ayudar

entreparéntesis ( ! ) dijo...

Bueno: era cuestión de paciencia, ya lo solucioné! el problema era que tenía definido en el ccs el body height como "100%" y no como auto... ahora todo marcha feliz.
Tenedlo en cuenta por si alguien se tropieza con dificultades!!!!

saludos

Unknown dijo...

Aún no me funciona en Fire Fox 3.05 alguna idea

Anónimo dijo...

Me ha funcionado de maravilla, solo que en Safari no funciona alguien sabe si existe una solucion
Gracias

Oscar Contreras dijo...

¡Arigatou! No sabes lo mucho que me has ayudado... levaba al igual que tu semanas buscando esta solución... te debemos una y bien grande :)

ljbustamante dijo...

Wow, me doy con la sorpresa que esta entrada antiquísima sigue teniendo visitas, lástima que no pude responder a varias consultas acerca de este pequeño código, si alguien llega a leer esto, este script solo funciona cuando la página que esta dentro del iframe pertenece al mismo dominio por el hecho de que Javascript tiene una sand-box que no permite manipular el DOM de documentos ajenos ;) sin embargo habría la posibilidad de "engañar" al navegador usando mod_rewrite en el .htaccess y hacer que una dirección del mismo dominio apunte a uno externo, esto sería transparente al navegador ya que Apache se encargaría de todo, a ver si les sirve, saludos

MGE dijo...

Buenas, de inicio gracias por el apoyo al sugerir esta solucion. En mi caso tengo un problema, todo se ve bien en IE pero en ff aparece mi pag de inicio completa y en un pestañear se achica en altura y si lo que se muestra es mas corto se achica lo que esta en el div. En cada pagina tengo flotantes

Anónimo dijo...

Muchas gracias! Hacía mucho tiempo que quería saber como calcular el alto de un iframe de forma automática y este post me fué de gran ayuda.
Saludos desde Argentina!