{"id":2729,"date":"2015-04-24T17:10:39","date_gmt":"2015-04-24T16:10:39","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=2729"},"modified":"2021-08-06T18:25:26","modified_gmt":"2021-08-06T17:25:26","slug":"comunicacion-escena-html-usando-descartesjs","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/comunicacion-escena-html-usando-descartesjs\/","title":{"rendered":"Comunicaci\u00f3n escena-html usando DescartesJS"},"content":{"rendered":"

Comunicaci\u00f3n entre una escena de Descartes con la p\u00e1gina HTML madre o con la p\u00e1gina HTML hija<\/h4>\n

Con el int\u00e9rprete DescartesJS, una escena de Descartes puede comunicarse con la p\u00e1gina HTML que le da soporte siempre que la escena est\u00e9 embebida mediante un iframe, y tambi\u00e9n puede comunicarse con una p\u00e1gina HTML que haya sido abierta por ella a trav\u00e9s de un espacio HTMLIframe<\/a>.<\/p>\n

En la imagen siguiente tenemos en el <body> de una p\u00e1gina html un <iframe> a trav\u00e9s del cual se embebe un fichero html ( en este caso ese archivo se denomina comunicacion_Descartes.html), el cual contiene una escena de Descartes.<\/p>\n

\"escenaEnIframe\"<\/a>

c\u00f3digo iframe para embeber una escena en una p\u00e1gina html<\/p><\/div>\n

Para que una pagina html, que es madre de una escena de Descartes a trav\u00e9s de un iframe o que es hija de ella mediante un espacio HTMLIframe, pueda recibir los mensajes que env\u00eda la escena Descartes mediante las funciones para la comunicaci\u00f3n<\/a>, necesita tener un manejador de eventos<\/a><\/p>\n

elemento<\/span>.addEventListener(\u00abmessage\u00bb, funcionQueManejaLosMensajes<\/span>)<\/p>\n

donde elemento es elemento de la p\u00e1gina al que se le asocia el manejador de los eventos que sobre \u00e9l acontecen <\/span><\/span>y la funci\u00f3n funcionQueManejaLosMensajes<\/span> sirve para gestionar el evento. A continuaci\u00f3n se refleja un esquema de esa funci\u00f3n donde se controla que el mensaje sea tipo set o update. En lugar del evento \u00abmessage\u00bb pueden contemplarse otros<\/a>.<\/p>\n

__________________________________________________<\/p>\n

function<\/span> funcionQueManejaLosMensajes<\/span>(evt) {<\/p>\n

var<\/span> data = evt.data;<\/p>\n

 \/\/ se maneja un mensaje del tipo set<\/span><\/p>\n

\/\/ data.name es el nombre de la variable<\/span>
\n \/\/ data.value es el valor de la variable<\/span><\/p>\n

if<\/span> (data.type === \u00abset\u00bb) {<\/p>\n

\/\/ incluir c\u00f3digo deseado<\/span><\/p>\n

}<\/p>\n

 \/\/ se maneja un mensaje del tipo update<\/span>
\nelse if<\/span> (data.type === \u00abupdate\u00bb) {<\/p>\n

\/\/ incluir c\u00f3digo deseado<\/span><\/p>\n

}<\/p>\n

}<\/p>\n

___________________________________________________________________<\/p>\n

Comunicaci\u00f3n de la p\u00e1gina HTML madre con la escena de Descartes<\/h4>\n

Para enviar informaci\u00f3n desde una pagina html, madre de una escena Descartes mediante iframe, a la escena de Descartes se utiliza la interfaz de comunicaci\u00f3n window.postMessage<\/a> de JavaScript, donde los mensajes son de la siguiente forma:<\/p>\n

referenciaAlIframe<\/span>.contentWindow.postMessage({ type: \u00abupdate\u00bb }, ‘*’);
\nreferenciaAlIframe<\/span>.contentWindow.postMessage({ type: \u00abset\u00bb, name: varName<\/span>, value: value<\/span> }, ‘*’);<\/p>\n

donde varName<\/span> es una cadena con el nombre de la variable que se le quiere pasar a Descartes y value<\/span> es el valor de la variable.<\/p>\n

Nota: Como se ha indicado en los p\u00e1rrafos anteriores en DescartesJS, no hay un API como tal, porque la funci\u00f3n funcionQueManejaLosMensajes<\/span> debe ser implementada de acuerdo a las necesidades del programa. Tal vez, para enviar mensajes hacia Descartes ser\u00eda conveniente tener un API, pero la forma de enviar los mensajes es tan simple que quiz\u00e1s no merezca la pena su elaboraci\u00f3n. El sistema de comunicaci\u00f3n<\/span> es muy sencillo, el \u00fanico inconveniente es la necesidad de saber el nombre de las variables que la pagina HTML espera recibir, as\u00ed como el de las variables que usa internamente la escena de Descartes.<\/div>\n
 <\/div>\n
 <\/div>\n
\n
\n<\/div>\n
Podemos ver un ejemplo a continuaci\u00f3n:<\/div>\n
\n
\n\n