altura del documento dentro de un iframe

derkenuke1 · #1 (**permalink**) 23/12/2003, 08:04

Bueno, contaré primero mi problema por si existe alguna solucion mas facil a la que yo propongo. Quiero tener en una pagina un iframe, que contenga al documento. Este iframe se debe redimensionar para que no se haga scroll (al tamaño de la pagina que contiene) pero que se muestre todo su contenido. He logrado redimensionar el iframe en tiempo de ejecucion, es muy facil, pero sabido esto, no se como lograr la altura que posee el documento dentro del iframe.

¿Alguien lo sabe? Muchas gracias.

derkenuke1 · #2 (**permalink**) 23/12/2003, 08:14

Tambien me valdria con algo para comprobar si hay scroll bar vertical y horizontal, así agrandaría hasta que desaparezcan.

tunait · #3 (**permalink**) 23/12/2003, 08:19

Para saber la altura de un documento puedes usar document.body.scrollHeight

Eso sí.... como lo tengas en capas de posición absoluta Explorer devolverá un valor inexacto..... (muy inexacto)

derkenuke1 · #4 (**permalink**) 23/12/2003, 08:35

Pasare el codigo, porque esa solucion me funciona poco, sino nada.

pagina_nueva_1.htm:
---------------------------
<iframe src="pagina_nueva_2.htm" id="ifr" style="width:300;height:50;border:solid 1 black;" name="ifr"></iframe>
<script>
function grand(h) {
iframe=document.getElementById("ifr")
iframe.style.height=h;
}
</script>

pagina_nueva_2.htm:
---------------------------
<body>
<p>mi body
<p>kahn
<p>masmas
<p>un parrafo massss
</body>
<script>
top.grand(document.body.scrollHeight);
</script>

Si que lo hace mas grande, pero no es nada exacto, y las posiciones no son absolutas.

tunait · #5 (**permalink**) 23/12/2003, 09:08

Sí que funciona, al menos en IE.

Donde no funciona (o funcionaba) es en netscape. No lo acepta en los estilos.

Dale dimensiones a tu iframe sin usar estilos y funciona ok en ambos navegadores (no sé en los demás)

<iframe src="iframe.htm" id="ifr" width="300" height="50" name="ifr"></iframe>

function grand(h) {
iframe=document.getElementById("ifr")
iframe.height=h;
}
</script>

Y en la página que carga dentro del iframe igual

<script>
top.grand(document.body.scrollHeight);
</script>

derkenuke1 · #6 (**permalink**) 23/12/2003, 09:17

Es curioso, si saco width="300" height="50" fuera del style="" cuando llamo a la function grand() desde la pagina que carga en el iframe me da error: permiso denegado.

Ademas lo mas raro es que en el script solo modifico el height, pero si pongo style="height:30;" width="50" tambien me da permiso denegado. Total, que solo me acepta poner todos los atributos en el style.

¿errores incomprensibles? para mi si.

tunait · #7 (**permalink**) 23/12/2003, 09:26

Pero no uses style para dimensionar, mira en la función que te dejé yá no hace referencia al style

function grand(h) {
iframe=document.getElementById("ifr")
iframe.height=h;
}

Yá te digo que no funcionará en netscape (ni mozilla, por supuesto) si lo haces con style.

Tal y como te lo he puesto a mi me ha funcionado perfecto en ambos navegadores

derkenuke · #8 (**permalink**) 23/12/2003, 09:38

Joe, en el frontpage no me funcionaba, me daba acceso denegado, quizás porque tenia los dos documentos abiertos, quien sabe.

Bueno, ahora si me funciona, solo me interesaba en IE6 pero ya que funciona en todos mejor que mejor. Aunque tiene un error de unos 5px xD.

Muchisimas gracias tunait.

tunait · #9 (**permalink**) 23/12/2003, 09:40

muchísimas de nadas.

Sip, lo de los 5 px mas o menos también lo he visto. Si te sirve de consuelo, netscape lo muestra perfecto y sin scroll.

Te sugiero le sumes a mano esos pixels de más al redimensionar

iframe.height=h + 5;

pd. qué pasó con tu nick?

derkenuke · #10 (**permalink**) 23/12/2003, 10:42

Juas, ya hice eso de sumarle 5. Lo del nick, es que ya tenia registrado derkenuke sin 1 y no me acordaba de la clave, pero ya lo tengo todo bien y puedo utilizar derkenuke y no derkenuke1.

Para curiosos:

PRINCIPAL.HTM:
--------------------
<html>

<body>

<script>
documentosIfr=new Array("iframe1.htm","iframe2.htm","iframe3.htm","i frame4.htm");
document.write("<style>.pestana { text-align:center;background-color:#aa0000;width:50;height:20;border:solid 1 black;position:absolute; }");
document.write(".pestanaAct { text-align:center;background-color:#ff0000;width:50;height:21;border:double 3 black;position:absolute; }</style>");

function cambiarPestana(cual) {
ifr.location.href=documentosIfr[cual];
for(a=0;a<documentosIfr.length;a++) eval("pestana"+a+".className='pestana';");
eval("pestana"+cual+".className='pestanaAct';");
}

function panel(t,l) {
document.write("<div id='panelPestanas' style='position:absolute;top:"+t+";left:"+l+";'>") ;
for(a=0;a<documentosIfr.length;a++) {
document.write("<div id='pestana"+a+"' class='pestana' style='left:"+((50+2)*a)+";top:0;'");
document.write("onclick='cambiarPestana("+a+");'>D oc "+a+"</div>");
}
document.write('<div id="panelEnSi" style="background-color:#440000;border:solid 1 black;width:'+(a*50)+';height:400;position:absolut e;top:20;">');
document.write("<iframe src='' id='ifr' style='border:1px solid black;' height=100 scrolling='no'></iframe>");
document.write("</div></div>");
}
panel(100,100);

function grand(h) {
iframe=document.getElementById("ifr")
iframe.height=h;
}
</script>
</body>

</html>

IFRAME1.HTM:
-----------------
<body>
<p>a
<p>mi par
<p>mi body
<p>kahn
<p>masmas
<p>un parrafo massss
<p> aki hay mas trankilo
<p>mas
<p>joder q bien
</body>
<script>
altura=document.body.scrollHeight+5;
top.grand(document.body.scrollHeight+5);
</script>

IFRAME2.HTM:
-----------------
<body>
<p>este es mi dos
<p>aki lo que quiero
<p>cambia
<p>ras muchas
<p>veces
</body>
<script>
altura=document.body.scrollHeight+5;
top.grand(document.body.scrollHeight+5);
</script>

IFRAME3.HTM:
-----------------
<body>
<p>mi tercero
<p>espero
<p>que esto
<p>salga
<p>bien
<p>porque
<p>sino
<p>me tiro por
<p>un barranco
<p>10 metro
<p> pa bajo
<p>y muero
</body>
<script>
altura=document.body.scrollHeight+5;
top.grand(document.body.scrollHeight+5);
</script>

IFRAME4.HTM:
-----------------
<body>
<p>el 4 a skk
</body>
<script>
altura=document.body.scrollHeight+5;
top.grand(document.body.scrollHeight+5);
</script>

Jeje, creo que me ha quedado bastante bien. Faltaría poner el script de todas las paginas iframeX.htm en un documento js para ser mas elegantes y ocupar menos espacio. Este era mi proyecto.

Un saludo a todos los desarrolladores