Que un iframe se ajuste al alto de lo que su SRC contiene

AlZuwaga · #1 (**permalink**) 10/03/2004, 12:01

Pues eso... se puede?

O sea.. que el height del iframe sea del 100% pero no de la ventana que lo contiene sino del contenido de su SCR.

Le estaré pidiendo manzanas al nogal?

Saludos

caricatos · #2 (**permalink**) 10/03/2004, 14:10

Hola dazuaga:

Estuve haciendo pruebas, y lo que más se parece es con el estilo width y height en el body...

<html>
<head>
<script type="text/javascript">
function ajustar() {
document.getElementById("prueba").style.width = window.frames.prueba.document.body.style.
width;
document.getElementById("prueba").style.height = window.frames.prueba.document.body.style.
height;
}

function ini() {
window.frames.prueba.document.open();
window.frames.prueba.document.write("<html><body style='background-color: red; width: 100px; height: 100px; margin: 0px'><div >Hola</div></body></html>");
window.frames.prueba.document.close();
setTimeout("ajustar()", 1000);
}
</script>
</head>
<body onload="ini();">
<iframe id="prueba" name="prueba" ></iframe>
</body>
</html>

A ver si pasito a pasito conseguimos el objetivo (y nos comemos las manzanas y las nueces)

Saludos

AlZuwaga · #3 (**permalink**) 10/03/2004, 15:02

Hola caricatos. Te cuento que no estoy entendiendo exactamente lo que el script hace

Tal vez es lo que necesito, pero por las dudas trataré de explayarme más:

Tengo una tabla con determinado ancho en px. esta tabla contiene un iframe al cual le puedo ajustar el width al 100 % y se extiende al ancho de la tabla... como en este ejemplo:

Código:

<table width="500" align="center">
  <tr>
    <td><iframe width="100%" src="int.asp"></iframe></td>
  </tr>
</table>

Ocurre que la página "int.asp" puede ser de un alto variable y no quiero que en el iframe me aparezcan las barras de scroll. En su lugar, prefiero que el iframe se "estire" hacia abajo para mostrar todo el contenido de "int.asp"

Me explico?

caricatos · #4 (**permalink**) 12/03/2004, 01:23

Hola otra vez:

Perdona por no contestar antes, pero esperaba que otros foreros se interesaran y saliera algo... Tan solo era una semillita. Además, ayer tuve problemas para conectarme.

Lo que quería mostrarte era la posibilidad de comunicación entre el iframe y la página contenedora.

Hice algunas pruebas, y lo más sencillo que encontré para explorer es:

<iframe id="prueba" name="prueba" src="index.html" onload="ini()"></iframe>

... y la función ini():

function ini() {
document.getElementById("prueba").width = document.frames.prueba.document.body.offsetWidth + document.frames.prueba.document.body.scrollWidth;
document.getElementById("prueba").height = document.frames.prueba.document.body.offsetHeight + document.frames.prueba.document.body.scrollHeight;
}

Lo probé en explorer y va bien, creo que puedes obviar la linea que modifica la anchura.

Saludos

caricatos · #5 (**permalink**) 12/03/2004, 01:31

Hola otra vez:

Al probarlo en Mozilla me dí cuenta que puse document.frames, y tiene que ir window.frames (en explorer cuela)
En Opera 7 no hace caso pero en Mozilla sí.

Saludos

AlZuwaga · #6 (**permalink**) 12/03/2004, 10:53

caricatos, no hace falta que pidas perdón, tampoco estás obligado a seguir un tema (que igual se agradece)

Bueno, lo pruebo y te comento.

AlZuwaga · #7 (**permalink**) 12/03/2004, 12:26

eSpetacular, como siempre.
Muchas gracias.

Por cierto, las manzanas estaban ricas. Las nueces no las probé porque me traen pedos :P

tunait · #8 (**permalink**) 15/03/2004, 05:49

movido desde html

saludillos....

caricatos · #9 (**permalink**) 15/03/2004, 14:46

Hola otra vez:

Aunque el tema esté resuelto, he tratado de ver por qué no funcionaba en opera, y resulta que el evento onload en el iframe no hace nada. Seguramente funcione en opera con el onload del body, pero no creo que merezca la pena...

Saludos

#10 (**permalink**) 12/10/2004, 14:58

A mí me funciona, pero cuando linkeo en alguno de los contenidos de dentro del iframe la ventana se multiplica de anchura. Y así cada vez q clikeo hasta q llega un momento q el ancho es enooorme

.
No se si tengo algo mal:

<html>
<head>
<title>foro</title>
<Link href="style.css" rel="stylesheet" type="text/css">

<SCRIPT TYPE="text/javascript">
function ini()
{
document.getElementById("foro").width =
window.frames.foro.document.body.offsetWidth +
window.frames.foro.document.body.scrollWidth;

document.getElementById("foro").height =
window.frames.foro.document.body.offsetHeight +
window.frames.foro.document.body.scrollHeight;
}
</SCRIPT>
</head>

<body background="images/bgr.gif" leftmargin="0" rightmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="500" align="center">
<tr>
<td><iframe id="foro" name="foro" src="foro/index.php" onload="ini()"></iframe></td>
</tr>
</table>

</body>
</html>

Ayudenme porfavor.

caricatos · #11 (**permalink**) 13/10/2004, 04:36

Hola kenshindark:

He visto que quitando la linea que suma los valores scrollWidth/scrollHeight mejora el script...

Esperemos que algún otro iluminado nos ayude.

Saludos

custo · #12 (**permalink**) 17/10/2004, 09:57

A mi tambien me pasa como a kenshindark, y si quito la linia que suma los valores scrollWidth/scrollHeight ya no me funciona...

qué puedo hacer???

gracias

Edito para decir que a mi borrando la linia que suma los valores offsetWidth/offsetHeight me funciona!!!!! y no las de scrollWidth/scrollHeight

salu2!!!

#13 (**permalink**) 18/10/2004, 04:18

Sí, a mì tmpoco me funciona si quito las lineas...

Ayudennooooos ¡¡

lguantes · #14 (**permalink**) 19/10/2004, 04:36

Hola según microsoft la solución que ofrece en su msdn es:
http://support.microsoft.com/default...b;en-us;278469

Y el código:

Código HTML:

<HTML>
<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
function reSize()
{
	try{
	var oBody	=	ifrm.document.body;
	var oFrame	=	document.all("ifrm");

	oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);
	oFrame.style.width = oBody.scrollWidth + (oBody.offsetWidth - oBody.clientWidth);
	}
	//An error is raised if the IFrame domain != its container's domain
	catch(e)
	{
	window.status =	'Error: ' + e.number + '; ' + e.description;
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY onload=reSize()>
	<iframe onresize=reSize() id=ifrm src=/?scid=your_page_here></iframe>
</BODY>
</HTML>

Esto funciona perféctamente si la página contenedor y la página que se carga en el iframe están en el mismo dominio.
Si no están en el mismo dominio existe un problema de permisos, que el msdn llama:Permission Denied Error Message When Scripting Across Frame
Lo encontrareis aquí http://support.microsoft.com/kb/167796/EN-US/

Espero que os sea de ayuda

#15 (**permalink**) 21/10/2004, 09:30

Buf...

Amos a ver... A mí me sigue sin funcionar, pero no se si porq esta mal o pq soy un manta con el php...

Yo he tenido q modificar el codigo del iframe a éste:
<iframe onresize=reSize() id=ifrm src=mipagina.php></iframe>
pq con el otro ni se me veia la pagina ni me lo ajustaba (xo solo he modificado el iframe, lo demas lo he dejado igual...). Aun así no me lo ajusta al contenido.

Vamos, q no me funciona...

claray · #16 (**permalink**) 21/10/2004, 11:33

Holas muchas... Sirve algo asi?

<SCRIPT TYPE="text/javascript">
function ini()
{

document.getElementById("foro").height = 1;
if (document.getElementById("foro").width) document.getElementById("foro").width = 1;

document.getElementById("foro").height = window.frames.foro.document.body.offsetHeight + window.frames.foro.document.body.scrollHeight+10;

document.getElementById("foro").width = parseInt(window.frames.foro.document.body.leftMarg in)+parseInt(window.frames.foro.document.body.righ tMargin)+parseInt(window.frames.foro.document.body .scrollWidth)+2;

}
</SCRIPT>

saludos.

JuanC_ · #17 (**permalink**) 21/10/2006, 22:50

A mi me funciona, pero tiene un problema.
Al principio me carga un html con muchas fotos, despues haces click y va a una foto especifica, y le cambia el alto automaticamente, pero cuando paso a la siguiente me deja el alto del html anterior...
que podria ser??

senseijulio · #18 (**permalink**) 15/11/2006, 21:40

Cita:

Iniciado por caricatos

Hola otra vez:

Perdona por no contestar antes, pero esperaba que otros foreros se interesaran y saliera algo... Tan solo era una semillita. Además, ayer tuve problemas para conectarme.

Lo que quería mostrarte era la posibilidad de comunicación entre el iframe y la página contenedora.

Hice algunas pruebas, y lo más sencillo que encontré para explorer es:

<iframe id="prueba" name="prueba" src="index.html" onload="ini()"></iframe>

... y la función ini():

function ini() {
document.getElementById("prueba").width = document.frames.prueba.document.body.offsetWidth + document.frames.prueba.document.body.scrollWidth;
document.getElementById("prueba").height = document.frames.prueba.document.body.offsetHeight + document.frames.prueba.document.body.scrollHeight;
}

Lo probé en explorer y va bien, creo que puedes obviar la linea que modifica la anchura.

Saludos

a mi me pasa exactamente locontrario:

en un iframe, llama al archivo de contenido de ese iframe. perfecto. ese archivo contiene una tabla, generada por codigo php. pero resulta que al momento de presentarla en la pantalla, el contenido de esa tabla se expande lo necesario hacia los lados y hacia abajo, lo que hace necesario en algunos casos las barras de desplazamiento. el problema es que si no se las pongo, veo en la pantalla exactamente el mismo contenido que viera si hubieran barras, entonces no puedo ver lo que falta.

es un script tipo Shoutbox, pero necesito saber como "autoformatear" lo que la gente escribe para adaptarlo al tamaño de la tabla, que esta dentro del contenido del iframe, el cual está en un <span> del archivo .css del sitio. en otras palabras, necesito q la tabla tenga el ancho fijo y que el contenido se adapta ahi, y no que la tabla se adapte al contenido

por favor necesito ayuda

autonotel · #19 (**permalink**) 24/11/2006, 09:58

Hola chicos, voy a abundar un poco en el tema: Yo he visto que en CMS Joomla y otros el código funciona perfectamente al menos en explorer y firefox, pero yo he tratado de sacar de ahí y no he conseguido que me funcione a mi. Quizá los eruditos podáis. A mi me encantaría.
Gracias de antemano.

Panino5001 · #20 (**permalink**) 24/11/2006, 17:17

Esto me funcionó en Opera, Explorer y Firefox:

Código:

<!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&iacute;tulo</title>
<script>
var intento;
function ajustar(){
if(document.getElementById('pepe').height>10){clearTimeout(intento);return;}
document.getElementById('pepe').height=document.getElementById('pepe').contentWindow.document.body.scrollHeight;
intento=setTimeout('ajustar()',500);
}
</script>
</head>

<body onload="ajustar()">
<iframe id="pepe" src="index.php" width="300" scrolling="no" height="10"></iframe>
</body>
</html>

gdb7 · #21 (**permalink**) 24/11/2006, 21:56

yo hice una union de dos, para que ande en IE y FF, no se en opera (mi ancho es fijo):

<SCRIPT LANGUAGE=javascript>

</SCRIPT>

<body onload=reSize()>

<iframe src="'archivo.html" frameborder=0 marginwidth=0 marginheight=0 scrolling=no onresize=reSize() id="ifrm" name="ifrm"></iframe>

espero ayude!

autonotel · #22 (**permalink**) 25/11/2006, 18:49

Claro, mi problema es que la empresa tiene permiso para introducir un catálogo que tiene montado su proveedor pero es otro dominio. Supongo que es problema de los permisos (pero de servidor y tal). Hay alguna forma de arreglarlo? Alguien me puede explicar eso?

Panino5001 · #23 (**permalink**) 25/11/2006, 20:20

Hubieras empezado por ahí, si el src del iframe no se encuentra en el mismo dominio no se puede hacer sólo con javascript. Tendrás que apoyarte en algún lenguaje de servidor. E incluso de esa manera es mejor no usar un iframe sino una simple capa.

coiservice · #24 (**permalink**) 05/08/2008, 11:16

hola prueben con esto

<script>
function resizeIframe(cad){
var miIframe=document.getElementById(cad);
var alturaPagina=miIframe.contentWindow.document.body. scrollHeight+20;
miIframe.style.height=alturaPagina;
}
</script>

coiservice · #25 (**permalink**) 05/08/2008, 11:23

y el iframe es:

<iframe src="coiservice.html" name="muestra" width="540" marginwidth="0" marginheight="0" align="right" scrolling="No" frameborder="0" id="muestra" onLoad="resizeIframe(this.id);"> Si lees esto, tu navegador no soporta iframes (Hasta IE4 los soporta, deberías actualizarte!) </iframe>

Panino5001 · #26 (**permalink**) 05/08/2008, 12:27

El mensaje original es del 2004. Por favor no revivas post antiguos.