Los juegos del Proyecto AJDA y las escenas de DescartesJS en general, pueden contener páginas HTML integradas en ellos, de forma que un espacio del juego sea una página HTML. Vamos a analizar como se envían datos al juego desde el iframe HTML que está embebido en él,lo cual tiene diversas utilidades que trataremos en otros artículos
El iframe que está embebido será una sencilla página HTML, que llamaremos hijo.html y que contiene en su cuerpo dos elementos de entrada de datos, un campo de texto (con identificador CT) y un selector (con identificador SL):
<input name="textfield" type="text" id="CT" value="Campo de texto" >
<select name="selec" id="SL">
<option value="0" selected></option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
Para que se puedan enviar los datos al juego, en la cabecera del iframe embebido en el juego se debe incluir el siguiente código:
<head>
<script>
window.onload = function(evt) {
//Envío de la variable SL del HTMLiFrame al juego que lo contiene
var ct1 = document.getElementById("SL");
// cuando el slector cambia, de valor se envía el dato al juego padre y se realiza una actualizacion.
ct1.addEventListener("change", function(evt) {
window.parent.postMessage({ type: "set", name: "SL", value: this.value }, '*');
window.parent.postMessage({ type: "update" }, '*');
});
//Envío de la variable CT del HTMLiFrame al juego que lo contiene
var ct2 = document.getElementById("CT");
// cuando el campo de texto cambia, es decir hay un enter o click, se envia el valor al juego padre.
ct2.addEventListener("change", function(evt) {
window.parent.postMessage({ type: "set", name: "CT", value: this.value }, '*');
window.parent.postMessage({ type: "update" }, '*');
});
}
</head>
Al modificarse los campos del iframe embebdido en el juego, se enviarán a éste con el nombre establecido en type: "set", name: "NOMBRE DE LA VARIABLE QUE SE RECIBIRÁ EL JUEGO". En este caso el evento addEventListener, cuando se produce un cambio en el valor del elemento al que está asociado, desencadena el envío del valor del mismo a través de la variable definida en set en la instrucción window.parent.postMessage.
CONTACTO
Código para embeber
