Los juegos del Proyecto AJDA y las escenas de descartes en general, pueden contener páginas html embebidas en ellos, es decir, que un espacio del juego sea una página html. Esto se ha utilizado en los juegos para cargar ficheros de preguntas a través de una página html (con contenido javascript) embebida en ellos.
Partamos de una sencilla página html, que llamaremos hijo.html y que contiene dos elementos identificados como: textoRecibido1 y textoRecibido2.
<body>
<div align="center">PÁGINA HIJO</div>
<span id="textoRecibido1"></span>
<span id="textoRecibido2"></span>
</body>
Ahora tenemos un juego, en el que definimos un espacio, llamado E2, en el que insertamos un espacio tipo HTMLIFrame en el que estará la página hijo.html.
value="tipo='HTMLIFrame' id='E2' x='90' y='90' ancho='50%' alto='50%' archivo='hijo.html'
El juego puede enviar datos de variables al iframe embebido en él en el momento en el que se ejecuta la instrucción:
Nombre del espacio del HTMLIFrame en el juego.set('VARIABLE RECIBIDA POR LA PÁGINA HIJO.',VARIABLE ENVIADA POR EL JUEGO)
Para que los datos enviados por el juegos puedan ser recibidos por la página hijo, en la cabecera de la página hijo.html hay que introducir el siguiente código javascript, mediante el cual vamos a enviar dos variables desde el juego que contiene al iframe html:
<head>
<script>
window.addEventListener("load", function(evt)
{
window.addEventListener("message", funcionQueManejaLosMensajes);
var data = evt.data;
// Se envía la variable V1JUG desde el juego a la página hijo que la recibe como V1HIJ.
//En momento del juego en el que se quiera enviar se pone la función E2.set('V1HIJ.',V1JUG)
if ((data.type === "set")&&(data.name==="V1HIJ")) {
// data.name es el nombre de la variable
// data.value es el valor de la variable
document.getElementById("textoRecibido1").textContent = data.value;
}
else if (data.type === "update") {
}
// Se envía la variable V2JUG desde el juego a la página hijo que la recibe como V2HIJ.
//En momento del juego en el que se quiera enviar se pone la función E2.set('V2HIJ.',V2JUG)
if ((data.type === "set")&&(data.name==="V2HIJ")) {
// data.name es el nombre de la variable
// data.value es el valor de la variable
document.getElementById("textoRecibido2").textContent = data.value;
}
else if (data.type === "update") {
}
});
</script>
</head>
- Inicialmente se incluye un manejador (listener –oyente–) de eventos que actúa en este caso cuando se genera un mensaje (evento message) ejecutando la función que hemos llamado funcionQueManejaLosMensajes, es decir, que cuando el iframe recibe un mensaje (en este caso del juego, se ejecuta la función que maneja los mensajes, en este caso recibe los datos).
- A continuación, desde el juego se han enviado dos variables que son recibidas como VIHIJ y V2HIJ. En los dos casos, en la condición lógica de la instrucción if, se identifica que data.type sea set y qué control ha sido el activado comparando data.name con V1HIJ o V2HIJ (estos son los nombres que se ponen entre comillas en el primer parámetro de la función set). Después se actúa de acuerdo a lo especificado en cada caso. Esa acción se inicia capturando el elemento de la página html cuyo id coincide con el indicado en document.getElementById("textoRecibido1"), en este caso "textoRecibido1" se corresponde con el id del elemento de hijo.html (análogamente pasa con "textoRecibido2"). La acción que se ejecuta en este ejemplo es cambiar el contenido de los elementos identificados como "textoRecibido" por el valor recibido del juego que está en data.value.
- En los dos casos se ve cómo se gestiona respectivamente el evento mensaje generado por los controles V1HIJ y V2HIJ mediante la función set (en este caso el mensaje generado por update() no realiza nada, pues no se usa en el juego, recordamos que la función de update es actualizar la página después de cargar los datos).
No hay comentarios :
Publicar un comentario