Estudiemos el caso en el que tenemos un juego contenido en un iframe de otra página padre y que desde el juego se quieren enviar datos de algunas de sus variables a la página html padre que lo contiene.
Indicamos el código html del cuerpo de una página padre, que contiene dos elementos (identificados como: textoRecibido1 y textoRecibido2) y un juegos (juego.html), embebido como iframe.
<body>
<div align="center">PÁGINA PADRE</div>
<span id="textoRecibido1"></span>
<span id="textoRecibido2"></span>
</div><iframe id="JUEGO" src="juego.html" width=1000 height=700 frameborder=0 seamless scrolling="no"></iframe>
</body>
Para que los datos enviados por el juegos puedan ser recibidos por la página padre que los contiene, en la cabecera de la página padre hay que introducir el siguiente código javascript, mediante el cual vamos a enviar dos variables desde el juego embebido:
<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 padre que la recibe como V1PAD.
//En momento del juego en el que se quiera enviar se pone la función parent.set('V1PAD.',V1JUG)
if ((data.type === "set")&&(data.name==="V1PAD")) {
// 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 padre que la recibe como V2PAD.
//En momento del juego en el que se quiera enviar se pone la función parent.set('V2PAD.',V2JUG)
if ((data.type === "set")&&(data.name==="V2PAD")) {
// 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>
- 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.
- La instrucción condicional if ((data.type === "set")&&(data.name === "NOMBRE VARIABLE")) {...} comprueba que el nombre de la variable espera recibir y el tipo, si estos son correctos ejecuta la acción que se le encomiende, en este caso cambiar el valor de un elemento por el de la variable recibida (document.getElementById("textoRecibido1").textContent = data.value).
- En el momento del juego en el que se quiera enviar el valor de la variable debe indicarse mediante la instrucción: parent.set('VARIABLE RECIBIDA POR LA PÁGINA PADRE.',VARIABLE ENVIADA POR EL JUEGO). Al ejecutarse parent.set en el juego los valores son automáticamente recibidos por la página padre.
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