{"id":2709,"date":"2015-04-23T12:25:04","date_gmt":"2015-04-23T11:25:04","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=2709"},"modified":"2021-08-07T16:19:21","modified_gmt":"2021-08-07T15:19:21","slug":"comunicacion-de-una-escena-con-el-html-embebido-en-un-htmliframe","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/comunicacion-de-una-escena-con-el-html-embebido-en-un-htmliframe\/","title":{"rendered":"Comunicaci\u00f3n de una escena con el html embebido en un HTMLIframe"},"content":{"rendered":"<p>En el siguiente ejemplo contamos con una escena \u201cmadre\u201d que incluye\u00a0un espacio HTMLIframe que sirve para embeber una p\u00e1gina html. En ella podemos distinguir y observar:<\/p>\n<ol>\n<li>La escena madre tienes tres controles n1, n2 y n3 y cuando cambian los valores de estos controles los env\u00eda respectivamente hacia un elemento del c\u00f3digo html, hacia un campo de texto editable y hacia un \u00e1rea de texto, los cuales quedan actualizados. Hay una comunicaci\u00f3n unidireccional de escena a html embebido en un espacio HTMLIframe.<\/li>\n<li>Por otro lado, en el html embebido hay otro campo de texto y otro \u00e1rea de texto y cuando se modifica su valor se actualizan dos variables de la escena madre y se muestra en dos gr\u00e1ficos de texto de esa escena. Hay una comunicaci\u00f3n unidireccional desde el html embebido a la escena madre.<\/li>\n<\/ol>\n<p>Puede descargar esta escena <a href=\"https:\/\/descartesjs.org\/repositorio\/ejComunicacionHTMLIframeUnidireccional-JS.zip\">desde este enlace<\/a>.<\/p>\n\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/ejComunicacionHTMLIframeUnidireccional-JS\/EscenaMadre.html\" width=\"800\" height=\"590\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>El esquema l\u00f3gico-funcional de este objeto es el siguiente:<\/p>\n<ol>\n<li>Una escena que contiene un espacio HTMLIframe con id E2 y que usamos\u00a0para embeber una p\u00e1gina html que hemos denominado EscenaHtmlHija.html.<\/li>\n<li>En la escena,\u00a0el control n1\u00a0tienen asociada la acci\u00f3n calcular en la que se ejecuta la <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2697\">funci\u00f3n de comunicaci\u00f3n<\/a> set mediante la expresi\u00f3n\u00a0E2.set(&#8216;n1&#8217;,n1), es decir se asigna el valor del control n1 a la variable n1 en E2 (este n1 es lo que aparece entre comillas en la funci\u00f3n set, podr\u00edamos llamarlo de otra forma, pero por comodidad le hemos dado igual nombre). An\u00e1logo se hace con los controles n2 y n3.<\/li>\n<li>En el fichero html \u00a0EscenaHtmlHija.html es necesario utilizar el manejador de eventos de javascript para que detecte el mensaje enviado por la escena a trav\u00e9s de la funci\u00f3n set y act\u00fae de acuerdo a nuestro deseo. Obviamente esto es algo ajeno a Descartes y nos adentramos en la<a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom_eventlistener.asp\" target=\"_blank\" rel=\"noopener noreferrer\"> programaci\u00f3n con javascript para controlar eventos<\/a>, si bien para nuestro fin basta que reproduzcamos adecuadamente el c\u00f3digo que ahora describiremos y que mostramos en la siguiente imagen:<br \/>\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2015\/04\/manejaeventos1.png\"><img class=\"alignleft wp-image-2717 size-full\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2015\/04\/manejaeventos1.png\" alt=\"\" width=\"756\" height=\"568\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2015\/04\/manejaeventos1.png 756w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2015\/04\/manejaeventos1-300x225.png 300w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ul>\n<li>En la imagen, la l\u00ednea incluida en el primer recuadro lo que hace es a\u00f1adir un manejador\u00a0(listener &#8211;oyente&#8211;) de eventos que act\u00faa en este caso cuando se genera un mensaje (evento message) ejecutando la funci\u00f3n que hemos llamado funcionQueManejaLosMensajes. \u00c9sta comienza a describirse en el segundo recuadro rojo de la imagen.<\/li>\n<li>En los tres recuadros siguientes observamos c\u00f3mo se gestiona respectivamente el evento mensaje generado por los controles n1, n2 y n3 mediante la funci\u00f3n set (en este ejemplo el mensaje generado por update() no realiza nada, pues no se usa en la escena).<\/li>\n<li>En los tres casos, en la condici\u00f3n l\u00f3gica de la instrucci\u00f3n if, se identifica que data.type sea \u00abset\u00bb y qu\u00e9 control ha sido el activado comparando data.value con \u00abn1\u00bb, \u00abn2\u00bb o \u00abn3\u00bb (estos son los nombres que se ponen entre comillas en el primer par\u00e1metro de la funci\u00f3n set). A continuaci\u00f3n se act\u00faa de acuerdo a lo especificado en cada caso. Esa acci\u00f3n se inicia capturando el elemento de la p\u00e1gina html cuyo id coincide con el indicado en\u00a0document.getElementById(\u00abdesdeCampoDeTexto\u00bb), en este caso \u00abdesdeCampoDeTexto\u00bb se corresponde con el id de un input tipo texto seg\u00fan podemos ver en el c\u00f3digo incluido en el &lt;body&gt; y que se refleja en la siguiente imagen.<br \/>\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2015\/04\/idHTML.png\"><img class=\"size-full wp-image-2718\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2015\/04\/idHTML.png\" alt=\"Id en los elementos incluidos en el c\u00f3digo HTML\" width=\"721\" height=\"448\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2015\/04\/idHTML.png 721w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2015\/04\/idHTML-300x186.png 300w\" sizes=\"(max-width: 721px) 100vw, 721px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<li>Una vez \u00a0identificado se procede a modificar alguna propiedad de ese elemento, por ejemplo al especificar\u00a0document.getElementById(\u00abdesdeCampoDeTexto\u00bb).value=data.value modificamos su valor con el valor (data.value) enviado en el mensaje. O bien modificar el propio c\u00f3digo html con la propiedad innerHTML, o cualquier otra propiedad que se desee.<\/li>\n<\/ul>\n<\/li>\n<li>El proceso inverso, es decir, enviar desde la p\u00e1gina\u00a0EscenaHtmlHija.html alg\u00fan valor a la escena, se realiza\u00a0utilizando la interfaz de comunicaci\u00f3n dada por JavaScript window.parent.postMessage. En este ejemplo contamos con un texto cuyo id es \u00abunCampoDeTexto\u00bb y un \u00e1rea de texto de id \u00abtextarea\u00bb (ver imagen anterior) y en la imagen siguiente observamos el c\u00f3digo para manejar los eventos generados.<br \/>\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2015\/04\/manejaeventos2.png\"><img class=\"alignleft size-full wp-image-2721\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2015\/04\/manejaeventos2.png\" alt=\"manejaeventos2\" width=\"913\" height=\"246\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2015\/04\/manejaeventos2.png 913w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2015\/04\/manejaeventos2-300x80.png 300w\" sizes=\"(max-width: 913px) 100vw, 913px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>En ellos, el evento que se gestiona\u00a0es \u00abchange\u00bb, de manera que cuando cambia el valor en ese elemento. As\u00ed pues para \u00abunCampoDeTexto\u00bb lo que se hace es enviar el valor actual de ese elemento a la variable de la escena cuyo nombre es \u00abvariableEnviada\u00bb, y en el caso del elemento cuyo id es \u00abtextarea\u00bb su valor es enviado a la variable de la escena denominada \u00abtaenviado\u00bb. Obviamente en lugar del evento \u00abchange\u00bb si se desea puede gestionarse <a href=\"https:\/\/www.codexexempla.org\/curso\/curso_4_2_g.php\" target=\"_blank\" rel=\"noopener noreferrer\">cualquier otro<\/a> que acontezca en esa p\u00e1gina.<\/li>\n<\/ol>\n<p>En el ejemplo anterior la comunicaci\u00f3n que se ha planteado en unidireccional, de escena a html o viceversa, pero la comunicaci\u00f3n se puede realizar de manera bidireccional sobre cualquier elemento, no hay m\u00e1s que programar la gesti\u00f3n de los dos eventos actuando sobre los elementos que se quieren relacionar. Ello es lo que hemos hecho en la siguiente escena, que se puede descargar <a href=\"http:\/\/descartesjs.org\/repositorio\/ejComunicacionHTMLIframeBidireccional-JS.zip\">desde este enlace<\/a>.<\/p>\n\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/ejComunicacionHTMLIframeBidireccional-JS\/EscenaMadrebi.html\" width=\"770\" height=\"375\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n","protected":false},"excerpt":{"rendered":"<p>En el siguiente ejemplo contamos con una escena \u201cmadre\u201d que incluye\u00a0un espacio HTMLIframe que sirve para embeber una p\u00e1gina html. En ella podemos distinguir y observar: La escena madre tienes tres controles n1, n2 y n3 y cuando cambian los valores de estos controles los env\u00eda respectivamente hacia un elemento del c\u00f3digo html, hacia un campo de texto editable y hacia un \u00e1rea de texto, los cuales quedan actualizados. Hay una comunicaci\u00f3n unidireccional de escena a html embebido en un espacio HTMLIframe. Por otro lado, en el html embebido hay otro campo de texto y otro \u00e1rea de texto y<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/comunicacion-de-una-escena-con-el-html-embebido-en-un-htmliframe\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[103,12,32],"tags":[],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2709"}],"collection":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=2709"}],"version-history":[{"count":30,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2709\/revisions"}],"predecessor-version":[{"id":3513,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2709\/revisions\/3513"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=2709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=2709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=2709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}