jueves, 31 de diciembre de 2020

Como se hizo. Envío de datos a un juego desde un iframe html embebido en él

Los juegos del Proyecto AJDA y las escenas de descartes 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" }, '*');
        });
      }
  
</script>
</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.

No hay comentarios :

Publicar un comentario