{"id":2341,"date":"2014-10-25T21:08:44","date_gmt":"2014-10-25T19:08:44","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=2341"},"modified":"2021-08-07T16:44:31","modified_gmt":"2021-08-07T15:44:31","slug":"comunicacion-entre-escenas-en-espacios-htmliframe","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/comunicacion-entre-escenas-en-espacios-htmliframe\/","title":{"rendered":"Comunicaci\u00f3n entre escenas en espacios HTMLIframe"},"content":{"rendered":"<p>En el siguiente ejemplo contamos con una escena \u00abmadre\u00bb que contiene dos escenas \u00abhijas\u00bb ubicadas cada una de ellas en un <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=1751\">espacio HTMLIframe<\/a>.\u00a0Cada hija manda a la madre los valores que modifica y esta \u00faltima\u00a0se encarga de mantener actualizadas a las hijas. Ello se logra mediante <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2697\">las funciones<\/a> <em>id.set(variable,valor)<\/em> e <em>id.update()<\/em>, la primera asigna a\u00a0la variable el valor indicado y la segunda actualiza. Van precedidas del prefijo que indica el <em>id<\/em> del espacio o bien puede indicarse <em>parent<\/em> para la escena \u00abmadre\u00bb. Puede descargar esta escena <a href=\"https:\/\/descartesjs.org\/repositorio\/escenas-comunicadas_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\/escenas-comunicadas_JS\/madre.html\" width=\"800\" height=\"600\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>El esquema de esta escena es el siguiente:<\/p>\n<ol>\n<li>Una escena madre incluida en la p\u00e1gina denominada madre.html que incluye:\n<ul>\n<li>Dos espacios HTMLIframe denominados con los identificadores H1 y H2 y que abren respectivamente las p\u00e1ginas hija1.html e hija2.html.<\/li>\n<li>En el algoritmo CALCULOS se especifica\u00a0H1.set(&#8216;var2&#8217;,var2);H1.update();H2.set(&#8216;var1&#8217;,var1);H2.update();<\/li>\n<\/ul>\n<\/li>\n<li>En la p\u00e1gina hija1.html una escena que incluye:\n<ul>\n<li>Un control var1 con una acci\u00f3n calcular que especifica\u00a0parent.set(&#8216;var1&#8217;,var1);parent.update()<\/li>\n<li>Dos gr\u00e1ficos tipo texto que muestran el valor de las variables var1 y var2<\/li>\n<\/ul>\n<\/li>\n<li>En la p\u00e1gina hija2.html una escena que incluye:\n<ul>\n<li>Un control var2 con una acci\u00f3n calcular que especifica\u00a0parent.set(&#8216;var2&#8217;,var2);parent.update()<\/li>\n<li>Dos gr\u00e1ficos tipo texto que muestran el valor de las variables var1 y var2<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>As\u00ed pues el esquema l\u00f3gico-funcional es el siguiente:<\/p>\n<p>a) Si se cambia el valor del control var1 en la escena hija 1, la acci\u00f3n calcular parent.set(&#8216;var1&#8217;,var1), asigna a la variable denominada var1 en la escena madre (<em>parent<\/em>)\u00a0el valor del control var1 de la escena hija 1. Entre comillas simples es el identificador\u00a0de la variable a actualizar y sin comillas la que actualiza. En este caso, se le ha dado el mismo <em>id<\/em>\u00a0con objeto de identificar con el mismo nombre a esa variable en todos los contextos\u00a0que se consideran, pero pueden ponerse nombres diferentes. Posteriormente en esa misma acci\u00f3n calcular se realiza la actualizaci\u00f3n de la variable var1 en la escena madre con la funci\u00f3n\u00a0parent.update()<\/p>\n<p>b) En la escena madre, el algoritmo CALCULOS, al ejecutar\u00a0H2.set(&#8216;var1&#8217;,var1) asigna a la variable var1 (escrita entre comillas simples) del espacio H2 el valor actual de la variable var1 de esta escena madre. De nuevo estamos usando por comodidad el mismo nombre para identificar a las variables que intervienen en diferentes contextos. Con\u00a0H2.update() se efect\u00faa la actualizaci\u00f3n en el espacio H2 de la variable var1.<\/p>\n<p>c) La escena hija2.html muestra el valor actual de la variable var1, que despu\u00e9s de la actualizaci\u00f3n realizada en el paso anterior es el valor procedente de la escena madre y el de \u00e9sta el procedente de la escena hija1.<\/p>\n<p>De\u00a0manera an\u00e1loga se procede para pasar el valor del control var2 de la escena hija 2 a la escena madre y de \u00e9sta a la escena hija1.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En el siguiente ejemplo contamos con una escena \u00abmadre\u00bb que contiene dos escenas \u00abhijas\u00bb ubicadas cada una de ellas en un espacio HTMLIframe.\u00a0Cada hija manda a la madre los valores que modifica y esta \u00faltima\u00a0se encarga de mantener actualizadas a las hijas. Ello se logra mediante las funciones id.set(variable,valor) e id.update(), la primera asigna a\u00a0la variable el valor indicado y la segunda actualiza. Van precedidas del prefijo que indica el id del espacio o bien puede indicarse parent para la escena \u00abmadre\u00bb. Puede descargar esta escena desde este enlace. El esquema de esta escena es el siguiente: Una escena madre<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/comunicacion-entre-escenas-en-espacios-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,26],"tags":[],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2341"}],"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=2341"}],"version-history":[{"count":14,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2341\/revisions"}],"predecessor-version":[{"id":3524,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2341\/revisions\/3524"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=2341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=2341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=2341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}