{"id":249,"date":"2013-02-04T18:24:59","date_gmt":"2013-02-05T01:24:59","guid":{"rendered":"http:\/\/behstant.com\/blog\/?p=249"},"modified":"2013-02-04T18:24:59","modified_gmt":"2013-02-05T01:24:59","slug":"comunicacion-de-datos-con-otra-ventana-window-open-javascript","status":"publish","type":"post","link":"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/","title":{"rendered":"Comunicaci\u00f3n de datos con otra ventana ‘window.open’ Javascript"},"content":{"rendered":"

Muchas veces queremos hacer\u00a0aplicaciones\u00a0web que comunique informaci\u00f3n de una ventana a otra. Existen diversos m\u00e9todos para manejar esta informaci\u00f3n, como: XML, JSON, TXT, etc. Todo esto lo usamos al manejar llamadas\u00a0as\u00edncronas. Sin embargo tambi\u00e9n podemos hacerlo con Javascript a trav\u00e9s de un query string. El hecho es que en una ventana hacemos una\u00a0l\u00f3gica\u00a0y en otra ventana manejamos otra de acuerdo a la informaci\u00f3n enviada, para hacer esto les mostrare un m\u00e9todo con Javascript que no es mas ni menos que estar trabajando con el DOM y con nuestros objetos.<\/p>\n

PANORAMA<\/strong><\/p>\n

Tenemos dos p\u00e1ginas web que llamaremos paginaPadre.html<\/em> y paginaHijo.htm<\/em>l. La p\u00e1gina padre \u00a0que contiene un bot\u00f3n para abrir la p\u00e1gina hijo. La p\u00e1gina hijo contendr\u00e1 Texto y dos elementos con los cuales trabajaremos, un input y un bot\u00f3n. Despues de introducir texto en el input y presionar el boton, se escribir\u00e1 en un elemento <p> de la\u00a0p\u00e1gina padre el texto que hayamos introducido. Y aqu\u00ed vamos:<\/p>\n

paginaPadre.html<\/strong><\/p>\n

<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN"\r\n"http:\/\/www.w3.org\/TR\/html4\/strict.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml" lang="en">\r\n <head>\r\n <meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>\r\n <title>prueba-padre<\/title>\r\n <script type="text\/javascript">\r\n\r\n function abrirHijo() {\r\n window.open("paginaHijo.html", "popupId", "location=no,menubar=no,titlebar=no,resizable=no,toolbar=no, menubar=no,width=500,height=500"); \r\n }\r\n\r\n <\/script>\r\n <\/head>\r\n <body>\r\n <h1 id="text">Comunicaci\u00f3n entre dos p\u00e1ginas con Javascript.<\/h1>\r\n <button onclick="abrirHijo();">Abrir P\u00e1gina Hijo.<\/button>\r\n <p id="deHijo"><\/p>\r\n <\/body>\r\n<\/html><\/pre>\n
paginaHijo.html<\/strong><\/p>\n
<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN"\r\n"http:\/\/www.w3.org\/TR\/html4\/strict.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml" lang="en">\r\n <head>\r\n <meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>\r\n <title>prueba-beforeclose<\/title>\r\n\r\n <script type="text\/javascript">\r\n\r\n function cerrar() {\r\n var data = window.document.getElementById('val1').value;\r\n window.opener.document.getElementById('deHijo').innerHTML = "Este texto viene de la p\u00e1gina hijo: "+data; \r\n\r\n this.window.close();\r\n }\r\n\r\n <\/script>\r\n\r\n <\/head>\r\n <body>\r\n <h1 id="text">\u00c9sta es la p\u00e1gina hijo lo que escriba en el input se mostrar\u00e1 en la p\u00e1gina padre al cerrarla.<\/h1>\r\n <input type="text" id="val1" \/> <button onclick="cerrar();">Cerrar<\/button>\r\n <div id="dialog1">\r\n <p>In scelerisque pid, porttitor magnis, in, cras aliquam nec et pulvinar nec odio adipiscing in integer. Augue ultricies scelerisque a, odio scelerisque elementum elementum, pulvinar integer nascetur! Pulvinar dignissim! Phasellus? Cras proin platea platea vut sit velit pid sit purus, ac elit purus enim, aliquet! Est mus arcu elementum cum! In. Augue odio magnis nunc! Diam. Ac? Elementum tincidunt, platea vel platea mauris parturient? Integer, elit sociis integer ac dapibus augue cras. In tincidunt, amet, enim phasellus aliquet pellentesque magna.<\/p>\r\n <\/div>\r\n <\/body>\r\n<\/html><\/pre>\n
En la p\u00e1gina padre lo que hace que se abra nuestra ventana es con esta funci\u00f3n que es llamada al presionar el bot\u00f3n de abrir:<\/p>\n
function abrirHijo() {\r\n window.open("paginaHijo.html", "popupId", "location=no,menubar=no,titlebar=no,resizable=no,toolbar=no, menubar=no,width=500,height=500"); \r\n }<\/pre>\n
Y en la p\u00e1gina hijo lo que nos va a permitir comunicarnos con la pagina padre es<\/p>\n
window.opener<\/pre>\n
La propiedad opener regresa una referencia a la p\u00e1gina que la abri\u00f3, por lo tanto con esta podemos manderle informaci\u00f3n \u00a0generada en la p\u00e1gina hijo. Esto quiere decir que los datos que genero en la pagina hijo se puden asignar a elementos de la p\u00e1gina padre, es por eso que el valor capturado en el input se lo asigno al <p> de la p\u00e1gina padre y despues de hacer esto mando llamar a la funcion close para cerrar la p\u00e1gina hijo.<\/p>\n
Si estamos trabajando con PHP y la pagina hijo es php, podemos enviar la informaci\u00f3n de la p\u00e1gina padre a trav\u00e9s de un query string, lo procesamos \u00a0y luego asignamos ese valor a un input y lo mostramos en la pagina padre.<\/p>\n
C\u00f3digo PHP que procesa un query string<\/p>\n
<?php<\/pre>\n
        \/\/ el query string procesado es paginaPadre.html?v1=4&v2=3\r\n\t$valor1 = $_GET['v1'];\r\n\t$valor2 = $_GET['v2'];\r\n\t\r\n\t$res = $valor1 + $valor2;\r\n?><\/pre>\n
Y lo usamos en nuestra pagina llamada paginaHijo.php<\/p>\n
<?php\r\n\t$valor1 = $_GET['v1'];\r\n\t$valor2 = $_GET['v2'];\r\n\t\r\n\t$res = $valor1 + $valor2;\r\n?>\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN"\r\n"http:\/\/www.w3.org\/TR\/html4\/strict.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml" lang="en">\r\n\t<head>\r\n\t\t<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>\r\n\t\t<title>prueba-beforeclose<\/title>\r\n\t\t<script type="text\/javascript">\r\n\t\tfunction cerrar() {\r\n\t\t\tvar data = window.document.getElementById('val1').value;\r\n\t\t\twindow.opener.document.getElementById('deHijo').innerHTML = "Este texto viene de la p\u00e1gina hijo: "+data;\t\t\r\n\t\t\tthis.window.close();\r\n\t\t}\r\n\t\t<\/script>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<h1 id="text">\u00c9sta es la p\u00e1gina hijo que procesa un query string<\/h1>\r\n\t\t<input type="text" id="val1" value="<?php echo $res;?>" disabled="disabled"\/> <button onclick="cerrar();">Cerrar<\/button>\t\t\r\n\t<\/body>\r\n<\/html><\/pre>\n
De esta manera es como comunicamos la informaci\u00f3n entre dos p\u00e1ginas a trabes de document.opene y un query string. Si tienes preguntas o comentarios puedes dejarlos abajo y te puedo ayudar, saludos.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Muchas veces queremos hacer\u00a0aplicaciones\u00a0web que comunique informaci\u00f3n de una ventana a otra. Existen diversos m\u00e9todos para manejar esta informaci\u00f3n, como: XML, JSON, TXT, etc. Todo esto lo usamos al manejar llamadas\u00a0as\u00edncronas. Sin embargo tambi\u00e9n podemos hacerlo con Javascript a trav\u00e9s de un query string. El hecho es que en una ventana hacemos una\u00a0l\u00f3gica\u00a0y en otra … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[31,28,23,9,8],"tags":[],"class_list":["post-249","post","type-post","status-publish","format-standard","hentry","category-howto","category-html","category-javascript","category-programacion","category-tutoriales"],"yoast_head":"\nComunicaci\u00f3n de datos con otra ventana 'window.open' Javascript » The Code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comunicaci\u00f3n de datos con otra ventana 'window.open' Javascript » The Code\" \/>\n<meta property=\"og:description\" content=\"Muchas veces queremos hacer\u00a0aplicaciones\u00a0web que comunique informaci\u00f3n de una ventana a otra. Existen diversos m\u00e9todos para manejar esta informaci\u00f3n, como: XML, JSON, TXT, etc. Todo esto lo usamos al manejar llamadas\u00a0as\u00edncronas. Sin embargo tambi\u00e9n podemos hacerlo con Javascript a trav\u00e9s de un query string. El hecho es que en una ventana hacemos una\u00a0l\u00f3gica\u00a0y en otra ... Read more\" \/>\n<meta property=\"og:url\" content=\"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"The Code\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-05T01:24:59+00:00\" \/>\n<meta name=\"author\" content=\"Reedyseth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Reedyseth\" \/>\n<meta name=\"twitter:site\" content=\"@Reedyseth\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Reedyseth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/\"},\"author\":{\"name\":\"Reedyseth\",\"@id\":\"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\"},\"headline\":\"Comunicaci\u00f3n de datos con otra ventana ‘window.open’ Javascript\",\"datePublished\":\"2013-02-05T01:24:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/\"},\"wordCount\":429,\"commentCount\":55,\"articleSection\":[\"howto\",\"html\",\"JavaScript\",\"Programaci\u00f3n\",\"Tutoriales\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/\",\"url\":\"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/\",\"name\":\"Comunicaci\u00f3n de datos con otra ventana 'window.open' Javascript » The Code\",\"isPartOf\":{\"@id\":\"https:\/\/behstant.com\/blog\/#website\"},\"datePublished\":\"2013-02-05T01:24:59+00:00\",\"author\":{\"@id\":\"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\"},\"breadcrumb\":{\"@id\":\"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/behstant.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comunicaci\u00f3n de datos con otra ventana ‘window.open’ Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/behstant.com\/blog\/#website\",\"url\":\"https:\/\/behstant.com\/blog\/\",\"name\":\"The Code\",\"description\":\"Learn Web Solutions in WordPress, PHP, jand also purchase code solutions.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/behstant.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\",\"name\":\"Reedyseth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"caption\":\"Reedyseth\"},\"description\":\"My Google Profile+\",\"sameAs\":[\"http:\/\/behstant.com\"],\"url\":\"http:\/\/behstant.com\/blog\/author\/reedyseth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comunicaci\u00f3n de datos con otra ventana 'window.open' Javascript » The Code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Comunicaci\u00f3n de datos con otra ventana 'window.open' Javascript » The Code","og_description":"Muchas veces queremos hacer\u00a0aplicaciones\u00a0web que comunique informaci\u00f3n de una ventana a otra. Existen diversos m\u00e9todos para manejar esta informaci\u00f3n, como: XML, JSON, TXT, etc. Todo esto lo usamos al manejar llamadas\u00a0as\u00edncronas. Sin embargo tambi\u00e9n podemos hacerlo con Javascript a trav\u00e9s de un query string. El hecho es que en una ventana hacemos una\u00a0l\u00f3gica\u00a0y en otra ... Read more","og_url":"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/","og_site_name":"The Code","article_published_time":"2013-02-05T01:24:59+00:00","author":"Reedyseth","twitter_card":"summary_large_image","twitter_creator":"@Reedyseth","twitter_site":"@Reedyseth","twitter_misc":{"Written by":"Reedyseth","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/#article","isPartOf":{"@id":"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/"},"author":{"name":"Reedyseth","@id":"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f"},"headline":"Comunicaci\u00f3n de datos con otra ventana ‘window.open’ Javascript","datePublished":"2013-02-05T01:24:59+00:00","mainEntityOfPage":{"@id":"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/"},"wordCount":429,"commentCount":55,"articleSection":["howto","html","JavaScript","Programaci\u00f3n","Tutoriales"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/","url":"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/","name":"Comunicaci\u00f3n de datos con otra ventana 'window.open' Javascript » The Code","isPartOf":{"@id":"https:\/\/behstant.com\/blog\/#website"},"datePublished":"2013-02-05T01:24:59+00:00","author":{"@id":"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f"},"breadcrumb":{"@id":"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/behstant.com\/blog\/tutoriales\/comunicacion-de-datos-con-otra-ventana-window-open-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/behstant.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Comunicaci\u00f3n de datos con otra ventana ‘window.open’ Javascript"}]},{"@type":"WebSite","@id":"https:\/\/behstant.com\/blog\/#website","url":"https:\/\/behstant.com\/blog\/","name":"The Code","description":"Learn Web Solutions in WordPress, PHP, jand also purchase code solutions.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/behstant.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f","name":"Reedyseth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","caption":"Reedyseth"},"description":"My Google Profile+","sameAs":["http:\/\/behstant.com"],"url":"http:\/\/behstant.com\/blog\/author\/reedyseth\/"}]}},"_links":{"self":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts\/249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/comments?post=249"}],"version-history":[{"count":0,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts\/249\/revisions"}],"wp:attachment":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/media?parent=249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/categories?post=249"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/tags?post=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}