Los juegos didácticos del proyecto AJDA son escenas de DescartesJS que se encuentran dentro de una página o documento html, la cual puede estar como un iframe de una página padre padre html que la contenga. Es decir, tenemos un juego que es un iframe de otra página padre.
En este artículo vamos a tratar como enviar datos desde la página html padre al juego embebido como iframe en ella.
Indicamos el código html del cuerpo de una página padre, que contiene tres controles (dos campos de texto, un botón y un selector) y un juegos (juego.html), embebido como iframe.
<body>
<div align="center">PÁGINA PADRE</div>
<input id="fecha" type="text" />
<input id="curso" type="text" />
<input id="enviar" type="button" value="enviar curso">
<select name="selec" id="respuesta">
<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>
</div><iframe id="JUEGO" src="juego.html" width=1000 height=700 frameborder=0 seamless scrolling="no"></iframe>
</body>
Para que los datos que se introduzcan en los campos de la página padre puedan ser recibidos por el juego, en la cabecera de la página padre hay que introducir el siguiente código javascript, mediante el cual vamos a enviar tres variables hacia el juego embebido de tres formas diferentes:
<head>
<script>
window.addEventListener("load", function(evt)
{
function funcionQueManejaLosMensajes(evt) {}
//Envio de variable de forma automática, tras hacer cualquier acción en el navegador
var contenido = document.getElementById("fecha");
var iframe = document.getElementById("JUEGO");
contenido.addEventListener("change", function(evt)
{
iframe.contentWindow.postMessage({ type: "set", name: "enviofecha", value: contenido.value }, '*');
iframe.contentWindow.postMessage({ type: "update" }, '*');
});
//Envio de variable al pulsar el botón enviar
var contenido1 = document.getElementById("curso");
var boton1 = document.getElementById("enviar");
var iframe = document.getElementById("JUEGO");
boton1.addEventListener("click", function(evt)
{
iframe.contentWindow.postMessage({ type: "set", name: "enviocurso", value: contenido1.value }, '*');
iframe.contentWindow.postMessage({ type: "update" }, '*');
});
//Envio de variable al cambiar el valor del campo selector
var contenido2 = document.getElementById("respuesta");
var iframe = document.getElementById("JUEGO");
contenido2.addEventListener("change", function(evt)
{
iframe.contentWindow.postMessage({ type: "set", name: "m1", value: contenido2.value }, '*');
iframe.contentWindow.postMessage({ type: "update" }, '*');
});
});
</script>
</head>
- Los eventos iniciales window.addEventListener son los que permiten que el navegador este preparado para enviar y recibir los datos en cuanto se de la orden.
- La define la variable data, en la que se recogerán la información de las variables que se reciban y envíen.
- Después se ha definido la variable o variables cuyo/s contenido se quiere enviar (contenido, contenido1, contenido2) y en las cuales se ha introducido el valor de los diferentes controles creados en la página padre.
- En la variable iframe se ha introducido el elemento iframe en el que se encuentra el juego.
- Mediante el evento variable.addEventListener("acción", function(evt) {...} se indica que al realizar la "acción" indicada sobre la variable se ejecutará la función (en este caso el envío de datos).
- La acción de enviar los datos se realiza mediante iframe.contentWindow.postMessage, en la cual se indica los datos de la variable cuyo valor se envía y el nombre de la variable que la recibe.
iframe.contentWindow.postMessage({ type: "set", name: "NOMBRE DE LA VARIABLE QUE SE USARÁ EN EL JUEGO Y QUE RECIBE LOS DATOS", value: VARIABLE DE LA PÁGINA PADRE CUYOS DATOS SE QUIEREN ENVIAR.value }, '*');iframe.contentWindow.postMessage({ type: "update" }, '*');
Cuando se realicen los eventos indicados, el juego recibirá los valores de los variables y los podrá utilizar. En el código utilizado, las variables recibidas sería: enviofecha, enviocurso y m1.
Este intercambio de información entre juego y página html que lo contiene es importante para poder enviar y recibir datos desde dispositivos externos a los juegos, aumentando la interactividad de los mismos.
No hay comentarios :
Publicar un comentario