Redimensionar Iframes en Firefox

adelaosa · #1 (**permalink**) 15/06/2008, 05:31

Hola a todos, quiero redimensionar un iframe, en IE me funciona perfectamente pero en Firefox ni caso...

Tengo el siguiente código:

HEAD:
function resizeIframe(idIframe){

var miIframe=document.getElementById(idIframe);
var alturaPagina=miIframe.contentWindow.document.body. scrollHeight+20;
miIframe.style.height=alturaPagina;
}

HTML
<iframe name="menu" id="menu" src="aproducto.htm" frameborder="0" scrolling="no" onLoad="resizeIframe('menu');"></iframe>

Gracias a todos!

Panino5001 · #2 (**permalink**) 15/06/2008, 08:24

Probá así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<script> 
function getWindowData(n,i){ 
    var ifr=document.getElementById(i).contentWindow.document || document.getElementById(i).contentDocument; 
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal; 
    if (typeof window.frames[n].innerWidth != 'undefined'){ 
        widthViewport= window.frames[n].innerWidth; 
        heightViewport= window.frames[n].innerHeight; 
    }else if(typeof ifr.documentElement != 'undefined' && typeof ifr.documentElement.clientWidth !='undefined' && ifr.documentElement.clientWidth != 0){ 
        widthViewport=ifr.documentElement.clientWidth; 
        heightViewport=ifr.documentElement.clientHeight; 
    }else{ 
        widthViewport= ifr.getElementsByTagName('body')[0].clientWidth; 
        heightViewport=ifr.getElementsByTagName('body')[0].clientHeight; 
    } 
    xScroll=window.frames[n].pageXOffset || (ifr.documentElement.scrollLeft+ifr.body.scrollLeft); 
    yScroll=window.frames[n].pageYOffset || (ifr.documentElement.scrollTop+ifr.body.scrollTop); 
    widthTotal=Math.max(ifr.documentElement.scrollWidth,ifr.body.scrollWidth,widthViewport); 
    heightTotal=Math.max(ifr.documentElement.scrollHeight,ifr.body.scrollHeight,heightViewport); 
    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal]; 
}  
function resizeIframe(ID,NOMBRE){ 
var m=getWindowData(NOMBRE,ID); 
document.getElementById(ID).height=m[5]; 
document.getElementById(ID).width=m[4]+22; 
 
}  
</script> 
</head> 
 
<body> 
<iframe name="menu" id="menu" src="test2.php" frameborder="0" scrolling="no" onload="resizeIframe('menu','menu');"></iframe></body> 
</html>

adelaosa · #3 (**permalink**) 16/06/2008, 02:21

Muchas gracias por tu respuesta, pero me temo que todavía sigue el problema. No da ningún tipo de error, simplemente no funciona en Firefox, en IE tampoco...

Alguna otra idea?

Panino5001 · #4 (**permalink**) 16/06/2008, 09:44

Lo probé en Explorer (6 y 7) y Firefox y funciona sin problemas, de manera que tendrás que buscar el fallo en otro lado (quizá tengas otro script que produce un conflicto o quizá la página base y el iframe no están en el mismo dominio y, si es esto último, necesitás un proxy para simular que la página externa es servida desde tu propio dominio).

adelaosa · #5 (**permalink**) 16/06/2008, 10:31

Hola Panino, tenías razón, no me había dado cuenta de que tenía el alto del iframe fijo en un css... :(

Ya lo he comprobado y funciona correctamente, peroo.. (siempre hay un pero.., jejeje) al cambiar de página dentro del iframe, este no se redimensiona, sino qeu se queda con el alto del contenido más alto, no sé si me explico.
Si el iframe se redimensionara cada vez que la página cambia, sería genial!

Muchas gracias por todo, este foro es genial!

Panino5001 · #6 (**permalink**) 16/06/2008, 13:59

Esto resuelve eso que mencionás:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<script> 
function getWindowData(n,i){ 
    var ifr=document.getElementById(i).contentWindow.document || document.getElementById(i).contentDocument; 
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal; 
    if (typeof window.frames[n].innerWidth != 'undefined'){ 
        widthViewport= window.frames[n].innerWidth; 
        heightViewport= window.frames[n].innerHeight; 
    }else if(typeof ifr.documentElement != 'undefined' && typeof ifr.documentElement.clientWidth !='undefined' && ifr.documentElement.clientWidth != 0){ 
        widthViewport=ifr.documentElement.clientWidth; 
        heightViewport=ifr.documentElement.clientHeight; 
    }else{ 
        widthViewport= ifr.getElementsByTagName('body')[0].clientWidth; 
        heightViewport=ifr.getElementsByTagName('body')[0].clientHeight; 
    } 
    xScroll=window.frames[n].pageXOffset || (ifr.documentElement.scrollLeft+ifr.body.scrollLeft); 
    yScroll=window.frames[n].pageYOffset || (ifr.documentElement.scrollTop+ifr.body.scrollTop); 
    widthTotal=Math.max(ifr.documentElement.scrollWidth,ifr.body.scrollWidth,widthViewport); 
    heightTotal=Math.max(ifr.documentElement.scrollHeight,ifr.body.scrollHeight,heightViewport); 
    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal]; 
}  
function resizeIframe(ID,NOMBRE){ 
document.getElementById(ID).height=null; 
document.getElementById(ID).width=null; 
var m=getWindowData(NOMBRE,ID);  
document.getElementById(ID).height=m[5]; 
document.getElementById(ID).width=m[4]+22; 
}  
</script> 
</head> 
 
<body> 
<iframe name="menu" id="menu" src="test2.php" frameborder="1" scrolling="no" onload="resizeIframe('menu','menu');"></iframe></body> 
</html>

Panino5001 · #7 (**permalink**) 16/06/2008, 22:25

Una pequeña modificación para que funcione en Safari, además de explorer 6 y 7, ópera y firefox:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<script> 
function getWindowData(n,i){ 
    var ifr=document.getElementById(i).contentWindow.document || document.getElementById(i).contentDocument; 
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal; 
    if (typeof window.frames[n].innerWidth != 'undefined'){ 
        widthViewport= window.frames[n].innerWidth; 
        heightViewport= window.frames[n].innerHeight; 
    }else if(typeof ifr.documentElement != 'undefined' && typeof ifr.documentElement.clientWidth !='undefined' && ifr.documentElement.clientWidth != 0){ 
        widthViewport=ifr.documentElement.clientWidth; 
        heightViewport=ifr.documentElement.clientHeight; 
    }else{ 
        widthViewport= ifr.getElementsByTagName('body')[0].clientWidth; 
        heightViewport=ifr.getElementsByTagName('body')[0].clientHeight; 
    } 
    xScroll=window.frames[n].pageXOffset || (ifr.documentElement.scrollLeft+ifr.body.scrollLeft); 
    yScroll=window.frames[n].pageYOffset || (ifr.documentElement.scrollTop+ifr.body.scrollTop); 
    widthTotal=Math.max(ifr.documentElement.scrollWidth,ifr.body.scrollWidth,widthViewport); 
    heightTotal=Math.max(ifr.documentElement.scrollHeight,ifr.body.scrollHeight,heightViewport); 
    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal]; 
}  
function resizeIframe(ID,NOMBRE){ 
document.getElementById(ID).height=null; 
document.getElementById(ID).width=null; 
window.location='#';//necesario para safari 
var m=getWindowData(NOMBRE,ID);  
document.getElementById(ID).height=m[5]; 
document.getElementById(ID).width=m[4]+22; 
}  
function addEvent(obj, evType, fn, useCapture){ 
  
 if (obj.addEventListener){ 
    obj.addEventListener(evType, fn, useCapture); 
     
  } else if (obj.attachEvent){ 
    obj.attachEvent("on"+evType, fn); 
    
  } else { 
   obj['on'+evType]=fn; 
  } 
} 
window.onload=function(){ 
    resizeIframe('pp','pp'); 
    addEvent(document.getElementById('pp'), 'load', function(){resizeIframe('pp','pp');}, false); 
} 
</script> 
</head> 
 
<body> 
<iframe name="pp" id="pp" src="test2.php" frameborder="1" scrolling="no"></iframe></body> 
</html>

adelaosa · #8 (**permalink**) 17/06/2008, 07:37

Perfecto!!!! eres un genio!, muchas gracias!

erpeli · #9 (**permalink**) 17/06/2008, 11:42

Estaba buscando algo como esto desde hace mucho. Ah!!, y lo estoy probando en firefox 3.0 y va sin problemas.

raulalva3 · #10 (**permalink**) 28/07/2008, 14:50

Cita:

Iniciado por Panino5001

Lo probé en Explorer (6 y 7) y Firefox y funciona sin problemas, de manera que tendrás que buscar el fallo en otro lado (quizá tengas otro script que produce un conflicto o quizá la página base y el iframe no están en el mismo dominio y, si es esto último, necesitás un proxy para simular que la página externa es servida desde tu propio dominio).

Hola Panino 5001!!! estuve viendo tu script... muy bueno! sólo que me funciona con archivos que tengo dentro del mismo dominio. Es decir, yo necesito llamar en este iframe una url de tipo: http://www.otrodominio.com/ y aparentemente la solución es este "proxy" pero no se como hacer esto

te agradecería muchísimo tu ayuda!
Saludos!!!!!!!

Panino5001 · #11 (**permalink**) 28/07/2008, 20:06

Como con javascript sólo podemos controlar iframes cuyo src pertenece al dominio donde javascript se ejecuta, lo que hay que hacer es tomar el código fuente de la página externa y volver a servirlo, pero desde el dominio donde javascript se ejecuta. Esto se hace con lenguaje de servidor. Con php, por ejemplo podemos usar varias técnicas, dependiendo de las herramientas con que cuente nuestro servidor web y de los controles que se hagan en la página cuyo contenido necesitemos tomar. Adicionalmente, para que se respeten los estilos css y en general las fuentes externas incluídas en dicha página (imágenes, swfs, javscripts, etc) deberemos incluir el tag base.
Un ejemplo sencillo de esto sería este:
proxy.php:

Código PHP:

 
<base href="<?php echo $_GET['url'] ?>" />
<?php 
echo file_get_contents($_GET['url']);
?>

Y dentro de un iframe lo usaríamos así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ejemplo</title>
</head>

<body>
<iframe width="500" height="500" src="proxy.php?url=http://www.forosdelweb.com"></iframe>
</body>
</html>

De esa manera tenemos a forosdelweb cargado en nuestro iframe, pero servido desde nuestro propio dominio.

, y entonces podemos realizar sin problemas las operaciones javascript que necesitemos.

salvador86 · #12 (**permalink**) 30/07/2008, 08:53

Hola Panino, probe tu código en una página que hice, y en la pc que la hice corre bien, me refiero al que funciona con Safari tambien pero borre esta línea:

Cita:

window.location='#';//necesario para safari

Pues al usar el iframe me sale un # en la url, al borrar igual corre bien, cuando subi al fin la página siguio viendose correctamente, pero cuando lo probe en otras pc (Aquí en Peru vamos a cabinas de Internet y usan mayormente Explorer 6) y se muestra un espacio mas o menos de 500px vacio en iframe y despues de ese espacio se muestra la página q debia estar ubicada en el iframe.
En mi casa también lo probe donde tengo Explorer 7(la que usa fichas) y también sale igual y mayormente los usuarios que han entrado en mi página me dicen lo mismo.

A que se puede deber esto, en mi trabajo tenemos XP original, y aquí en Peru las mayoria de los Internet tienen Xp pirata, ¿sera por eso?, espero tu ayuda, estoy revizando en código para ver que encuentro, te dejo la url para que lo puedas ver www.vivatoursperu.com

Panino5001 · #13 (**permalink**) 30/07/2008, 09:24

Acabo de probarlo con IETester, ya que no tengo explorer 6 y hay espacios pero no en el iframe, es decir, si le agrego borde al iframe -ejecutando este bookmarklet en la barra de direcciones:

Código PHP:

  javascript:document.getElementById('portada').style.borderStyle='solid';void(0);

- no se ven espacios en su interior y sí en los alrededores, con lo cual debe ser un tema de maquetado css y no del iframe y su redimensionamiento.

salvador86 · #14 (**permalink**) 30/07/2008, 16:11

Gracias Panino por contestar, rebizare mi hoja de estilo, espero encontrar el error

salvador86 · #15 (**permalink**) 30/07/2008, 16:34

Panino quieres decir que tu tambien ves el error del cual mencione, entonces como dices es problema de css

Panino5001 · #16 (**permalink**) 30/07/2008, 21:05

Lo que dije es que tu problema es de css, no de javascript.

mfares07 · #17 (**permalink**) 21/08/2008, 05:41

Hola estoy buscando por todos lados y parece que en este foro me acerco mas a lo que busco. Necesito redimensionar un iframe variable al alto (en el que está aca publicado afecta al ancho+alto) solo necesito que modifique el alto, probé en modificarlo yo pero no pude.
Tengo problemas en FF porque queda siempre con el tamaño mas alto y no se actualiza. Es urgente! please... se que podrán ayudarme, saludos.

salvador86 · #18 (**permalink**) 11/09/2008, 10:07

hola yo tambien necesitaba lo que necesitas y use el mismo código que nos ha dado panino pero solo estableces el ancho en esta linea

Cita:

Espero que te sirva Mfares

mfares07 · #19 (**permalink**) 25/09/2008, 01:48

Hola, Funciona! gracias realmente! hace mucho que llevo buscando una solución a este problema.
Hago otra pregunta depaso... en caso de que la altura del iframe sea menor que lo demas (por ej. un menú vertical en columna izquierda)
hay alguna manera para "rellenar" o que se ajuste a la altura de lo demás? espero se entienda lo que digo. Gracias otra vez.

salvador86 · #20 (**permalink**) 02/10/2008, 10:03

Mfares tambien funciona si dejas la línea de codigo de esta manera:

Cita:

document.getElementById(ID).width=m[4];

en vez que:

Cita:

document.getElementById(ID).width=520;

en cuanto tu pregunta estaré investigado me supongo que debe hacerse con un par de "if" si lo encuentras no dudes en subirlo.

ACX_POISON · #21 (**permalink**) 08/05/2009, 16:04

Panino5001 Gracias X su codigo
era lo que tanto habia buscado

Gracias

anti_rockerss · #22 (**permalink**) 29/10/2009, 00:21

Primero agradecerte por el código que redimenciona los IFRAMES, lo buscaba hace tiempo.

Segundo, quisiera saber si me puedes ayudar con solo un pequeño detalle: Todo me funciona perfecto con el código, excepto:

window.location='#';//necesario para safari

Lo anterior inhabilita los botones:
"ir a la página anterior" e "ir a la página siguiente"
de Firefox.

Pero si borro ese trozo del código, me tira error en Safari, como bien comentaste en tu código.

Si pudieras ayudarme con eso te lo agradecería un montón.

Bueno saludos y gracias de antemano.

Panino5001 · #23 (**permalink**) 29/10/2009, 06:04

Así, es, en efecto, pero para Safari no encuentro otra solución diferente, que no pase por usar temporizadores dentro o fuera del iframe.

anti_rockerss · #24 (**permalink**) 29/10/2009, 16:43

Cita:

Iniciado por Panino5001

Así, es, en efecto, pero para Safari no encuentro otra solución diferente, que no pase por usar temporizadores dentro o fuera del iframe.

Ok, Gracias de todos modos por responder.

Saludos.