Entradas con la etiqueta ‘Callback’

JS – Comunicación entre ventanas

Publicado por Iván Gajate el 30 de septiembre de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Si una ventana de html abre otra, estas se pueden comunicar entre ellas. Normalmente se hace con window.open, pero a mi este método no me gusta porque eso abre un popup y la mayoría de navegadores tienen bloqueados los popups.

Lo que muchos no saben es que abriendo una ventana desde un enlace directo, no se bloquea la ventana y se siguen pudiendo comunicar de la misma manera, a través del window.opener

Dejo un ejemplo de un index, que abre una ventana hija (hijo.html)

Este hijo a su vez, tiene un iframe que carga ok.html

Esto lo hago porque hay muchos servicios, como Youtube o Facebook que se abren en un iframe, y una vez logado el usuario, se re dirigen a una url dada. De esta forma, nuestra app de Youtube estaría dentro de nuestro iframe, y este puede comunicarle a quien quiera que se ha logado con éxito.

HTML PADRE:

<body>
	<a href="hijo.html" target="_blank">Abrir ventana</a>
 
	<script>
 
		// La ventana hijo me informa que se ha abierto, y me puede pasar una referencia suya
		function popupAbierto(windowHijo){
			console.log("Ventana Abierta!! " , windowHijo);
		}
 
		// La ventana hijo me informa que se ha cerrado
		function popupCerrado(){
			console.log("Ventana Cerrada");
		}
 
	</script>
</body>

HTML HIJO:

<body>
 
	<iframe src="ok.html" frameborder="1"></iframe>
 
	<script>
 
		// Informo de que me han abierto. Puedo pasarle una referencia a esta ventana para que pueda acceder a ella el padre
		window.opener.popupAbierto(window);
 
		// Le digo a la ventana padre que esta ventana se va a cerrar (tambien puedo delegar esta responabilidad al padre)
		function usuarioLogado(){
			window.opener.popupCerrado();
			window.close();
		}
 
	</script>
</body>

HTML OK:

<body>
	<a href="javascript:logadoOk()" target="_self">Ya me he logado y quiero cerrar esta ventana</a>
 
	<script>
 
		// Se lo comunico la ventana contenedora de este iFrame
		function logadoOk(){
			window.parent.usuarioLogado();
		}
 
	</script>
</body>

Descargar ejemplo de comunicación entre ventanas

 

JavaScript EnterFrame

Publicado por Iván Gajate el 20 de julio de 2013 en JavaScript | Los comentarios están cerrados.

Comparto aquí mi «clase» EnterFrame de JavaScript que uso para animar objetos de forma continua como haría en Flash.

Se usaría así:

YXQN.EnterFrame.add(miFuncion, this);

Tiene estos métodos que se explican por si solos:

YXQN.EnterFrame.add(function, scope);
YXQN.EnterFrame.remove(function, scope);
YXQN.EnterFrame.pause();
YXQN.EnterFrame.resume();
YXQN.EnterFrame.clear();
YXQN.EnterFrame.getCallbacks();
YXQN.EnterFrame.setFps(value);

Se apoya en el rAF.js de Paulirish para optimizar el rendimiento, y yo la he puesto bonita como a mi me gusta 🙂

Descargar EnterFrame.js

 

Pasar parámetros al addEventListener en AS3

Publicado por Iván Gajate el 5 de noviembre de 2008 en AS3, Flash, Tutoriales | 33 comentarios »

Algo tan sencillo y resulta que no se puede ¿?

plegar_btn.addEventListener(MouseEvent.MOUSE_UP,  plegar, true);

No me deja ponerle mas parámetro tras la referencia a la función. ¿para qué sirve una función si no le puedo pasar parámetros? Y es una pena, porque con éste método ya me había olvidado del Delegate.create… 😉

Buscando por la red, la solución que mas me convence por lo sencilla y elegante es la de Wildwinter, que se ha construido una clase Callback tal y como se hacía con el Delegate de AS2, de tal manera que ahora podemos poner

plegar_btn.addEventListener(MouseEvent.MOUSE_UP, Callback.create(plegar, true));

Y con ello conseguimos poder pasar los parámetros que queramos a la función plegar. En este caso "true", pero podría ser cualquier otro, o varios.

Lo mejor de este método frente a otros es que es un "envoltorio" del verdadero evento, con lo que en la función receptora, seguiremos teniendo como primer parámetro el evento de tipo MouseEvent.

Leer el resto de esta entrada