Iframes dinámicos

eXtreM3 #1 Mar '11

Wenas! Me han pedido que haga lo siguiente. El cliente tiene una aplicación que permite a los usuarios de su web loguearse. Lo que quiere es poder incrustarlo en cualquier web mediante un iframe, rollo facebook.

Entonces, el diseño que él plantea es que aparezca una imagen de un candado, de unos 50x50 pixels por ejemplo, que al hacer clic en él aparezca el formulario del login. Joder tengo la sensación de que me he explicao como el culo, voy a intentar ilustrarlo xD

página inicial

botón (50x50 pixels) -> el iframe medirá 50x50

página con botón pinchado

botón
formulario
------usuario
------contraseña
------botón login -> el iframe medirá 300x300

Entonces, necesito saber si se puede hacer con una función javascript que al pinchar inicialmente en el botón del candado, se le cambie el width y el height del iframe contenedor.

Saludos!

B

[Borrado] #2 Mar '11

http://www.phpgenious.com/2010/04/change-div-heightwidth-with-body-widthheight-using-jquery/ eso o javascript y DOM a palo seco

1 respuesta

eXtreM3 #3 Mar '11

#2 mmmm no es exactamente lo que quiero. Es decir me funciona que al hacer clic en el botón, el iframe cambie de tamaño, peeeeeero tiene que estar la función javascript en el html padre. Es decir ahora mismo tal y como lo tengo, habría que decirle a la gente: "Para meter mi caja login en tu web, tienes que pegar esta funcion <funcion js> en el head y este iframe <iframe> donde quieras del body", eso funcionaría, pero me gustaría poder incluir la función javascript en el html hijo, y darle al cliente unicamente el <iframe> para que lo copie en su body y fuera.

B

[Borrado] #4 Mar '11

Ya pero los eventos solo los detecta en el iframe, si realiza acciones fuera no las tiene en cuenta.

eXtreM3 #5 Mar '11

Qué putá, bueno gracias ^^

Habría otra manera de hacer lo que quiero??

NeB1 #6 Mar '11

#1 con algo así como

parent.document.getElementById("#idDelIFRAME").style.width = "300px";

podrías cambiar el tamaño del iframe desde una función llamada desde dentro del iframe. en jquery sería algo así:

$("#idDelIFRAME", top.document).css('width','300px');

suerte

1 1 respuesta

eXtreM3 #7 Mar '11

#6 Te leí el día que posteaste, pero quería esperar a llegar al curro y probarlo para decirte algo. Efectivamente, una vez más has demostrao que eres el puto amo xD, funcionó.

Dejo el código de las 2 páginas por si a alguien le sirve alguna vez:

Página padre que contiene el iframe

<html>
   <body>
      <iframe id="ifra" src="carga.html" width="100" height="40"></iframe>
   </body>
</html>

Página que contiene función jquery y contenido del iframe

<html>
<head>
 <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
 <script language="javascript">

function cambia()
{
	$("#ifra", top.document).css('width','300px');	
	$("#ifra", top.document).css('height','300px');
}

 </script>
</head>
<body>
	<p><input type="button" name="Submit" value="cargar" onclick="cambia();" /></p>
        vamos a ver mas contenido<br />
        vamos a ver mas contenido<br />
        vamos a ver mas contenido<br />
        vamos a ver mas contenido<br />
        vamos a ver mas contenido<br />
</body>
</html>

Gracías tio

1 1 respuesta

NeB1 #8 Mar '11

#7 mola! ^^

Iframes dinámicos

Usuarios habituales

Tags