Problemas con redimensionar iframe

salvador86 · #1 (**permalink**) 15/07/2008, 13:48

Hola, tengo un pequeño problema con el código para redimensionar un ifreme que encontre en este enlace de este foro:

http://www.forosdelweb.com/f13/redim...0/#post2451102

Cita:

<!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.docum ent || document.getElementById(i).contentDocument;
var widthViewport,heightViewport,xScroll,yScroll,width Total,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.scrollLef t);
yScroll=window.frames[n].pageYOffset || (ifr.documentElement.scrollTop+ifr.body.scrollTop) ;
widthTotal=Math.max(ifr.documentElement.scrollWidt h,ifr.body.scrollWidth,widthViewport);
heightTotal=Math.max(ifr.documentElement.scrollHei ght,ifr.body.scrollHeight,heightViewport);
return [widthViewport,heightViewport,xScroll,yScroll,width Total,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>

Si funciona muy bien pero debido a que estoy usando div coloqueel IFRAME dentro de un div, y debajo coloque otro div que es el pie de página, pero ya no se muestra, desde que coloque este código es como si se halla cortado esta parte o no se encuntre el pie de página esta es la página http://www.vivatoursperu.com/
espero que me puedan ayudar muchas gracias.

Sensorium · #2 (**permalink**) 15/07/2008, 20:07

mmm, tu deseas dar el HEIGHT del contenido al iframe? yo para eso realizo una funcion ONLOAD muy sencilla y funciona, eso si deberás ponerla en cada página que valla en el iframe
te dejo el codigo quizá te sirva; envuelve TODO el contenido de la pagina que habres en el iframe en un Div y dale de id="alto"

Código:

window.onload = function() {
parent.document.getElementById("ppal").height = document.getElementById("alto").offsetHeight;
/*ppal seria el ID del Frame*/
}

SALUDOS!

salvador86 · #3 (**permalink**) 16/07/2008, 13:09

Hola Sensorium gracias por contestar, pero a mi me gustaria ahorrarme el trabajo de estar poniendo la altura en todas las páginas, pues puede crecer el contenido y eso haria tener la necesidad de cambiar manualmente la medida del alto.

POr seacaso coloco mi código HTML y el CSS del div que no aparece gracias por ayudarme

Cita:

<!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>Documento sin título</title>
<link href="estilos/estructura.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="librerias/libreria.js"></script>
</head>
<body>
<div class="contenedor">
<div id="titulo">
<table border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="30"><img src="gifs/usa.gif" /></td>
<td width="218"><a href="mailto:[email protected][email protected]">[email protected]</a></td>
</tr>
<tr>
<td><img src="gifs/espana.gif" /></td>
<td><a href="mailto:[email protected][email protected]">[email protected]</a></td>
</tr>
<tr>
<td><img src="gifs/brasil.gif" /></td>
<td><a href="mailto:[email protected][email protected]">[email protected]</a></td>
</tr>
</table>
<br>
</div>
<div id="menu">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','780','heigh t','85','src','animaciones/SimbolColors','quality','high','pluginspage','http ://www.macromedia.com/go/getflashplayer','movie','animaciones/SimbolColors' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="780" height="85">
<param name="movie" value="animaciones/SimbolColors.swf" />
<param name="quality" value="high" />
<embed src="animaciones/SimbolColors.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="85"></embed>
</object>
</noscript>
<div id="idioma">
<p>
<script type="text/javascript" src="librerias/idioma.js"></script>
</p>
</div>
</div>
<div id="menuv">
<ul>
<li>
<a href="c-tours.html" target="portada">Cómo es Perú</a>
<a href="c-compania.html" target="portada">La Compañia</a>
<a href="c-mision.html" target="portada">Misión</a>
<a href="c-tecnologia.html" target="portada">Tecnología de Punta</a>
<a href="c-viajes.html" target="portada">Cómo Viajamos</a>
<a href="c-guias.html" target="portada">Guías</a>
<a href="c-descuentos.html" target="portada">Decuentos por Grupos</a>
<a href="c-preguntas.html" target="portada">Preguntas Frecuentes</a>
<a href="c-solicitud.html" target="portada">Pedido de Información</a>
<a href="#">Contáctenos</a>
<a href="#">Mapa Web</a>
<a href="#">Nuestros Hoteles</a> </li>
</ul>
<div id="avizos">
<img src="imagenes/logo2.jpg" width="184" height="51" />
<p>
Calle Colina 151 Miraflores
Lima - Perú -  Sudamérica
<img src="gifs/fono.gif" />+ + 51 1 447-2057<br />
<img src="gifs/fax.gif" />+ + 51 1 445-7874<br />
<img src="gifs/nextel.gif" />51*406*5283 24 hr </p>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="gifs/usa.gif" /></td>
<td><a href="mailto:[email protected][email protected]">[email protected]</a></td>
</tr>
<tr>
<td><img src="gifs/espana.gif" /></td>
<td><a href="mailto:[email protected][email protected]">[email protected]</a></td>
</tr>
<tr>
<td><img src="gifs/brasil.gif" /></td>
<td><a href="mailto:[email protected][email protected]">[email protected]</a></td>
</tr>
</table>
</div>
</div>
<div id="marco">
<iframe name="portada" id="portada" src="c-dest-tambopata.html" frameborder="0" scrolling="no" />
</div>
<div id="piepagina">
<a href="c-tours.html" target="portada">Cómo es Perú</a> |
<a href="c-tours.html" target="portada">La Compañia</a> |<a href="#">Misión</a> |
<a href="#">Tecnología de Punta</a> |
<a href="#">Cómo Viajamos</a> |
<a href="#">Guías</a> |
<a href="#">Decuentos por Grupos</a> |
<a href="#">Preguntas Frecuentes</a>
<a href="#">Pedido de Información</a> |
<a href="#">Contáctenos</a> |
<a href="#">Mapa Web</a> |
<a href="#">Nuestros Hoteles</a><br>
<br>
<font>®Derechos Reservados - Viva Tours Perú<br>Lima Perú 2008</font> </div>
</div>
</body>
</html>

css

Cita:

#piepagina{
width:780px;
height:80px;
text-align:center;
float:left;
padding-top:15px;
font-size:11px;
color:#C0C0C0;
}
#piepagina font {
color:#666666;
font-size:10px;
}

Lo he probado con muchos ejemplos y nunca se muestra los contenidos que estas debajo del iframe. Muchas Gracias

salvador86 · #4 (**permalink**) 16/07/2008, 13:42

Encontre la solución y me parece muy raro, es la siguiente:
Yo coloque este código al contruir el iframe:

Cita:

Al final como como es en XHTML " />" Ahora lo cambie de esta manera:

Cita:

Y ya solucionado, pero no entiendo porque no funciona el primero, muchas gracias por ayudarme.