Simbiontes
Cada loco con su tema   

Blog |  Acerca de...  |  Asuntos recurrentes  | 

Comunicación entre ventanas con Javascript

Escrito por El Malvado Acidonitrix , Viernes 22 de Julio de 2005
   29 Comentarios
Archivado en: Codeblog

Cómo manipular una ventana hija desde la ventana que la ha abierto, mediante javascript.

Esta chuchería muestra cómo manipular una ventana de navegador abierta desde otra. La comunicación no es del todo birideccional. Una ventana madre puede cerrar la hija, pero lo contrario no se permite por seguridad.

Para abrir una ventana que luego queramos manipular, es necesario abrirla declarándola como objeto. Esto la hace existir en dos niveles distintos: el espacio HTML es el primero. El segundo es el espacio que maneja Javascript, es decir, el navegador propiamente dicho.

objeto = open.window('url', propiedades);

Como en los viejos cuentos de magia donde el nombre de las personas y cosas tiene su importancia, pues permite dominarlas, el hecho de que nuestra ventana hija tenga nombre nos permite invocarla. Por ejemplo, para cerrarla hacemos: objeto.close(). En vez de "objeto" se la puede llamar de cualquier forma; la regla es llamarla siempre por el mismo nombre.

Si la abrimos así: ventanaHija = open.window('url', propiedades);

entonces siempre la invocaremos por ese nombre: ventanaHija.close()

 

Curiosamente, la ventana abierta puede recibir un nombre dentro del método open.window, pero invocando ese nombre a secas no se cierra. En realidad, el segundo nombre es para usarla en HTML al declarar un target en un enlace.

Por cierto, que la ventana abierta tiene una propiedad que se llama window.opener y hace referencia a la madre. Puedes hacer cosas como referirte a un campo de la ventana madre: window.opener.formulario.razon_social.value, etcétera...

Los siguientes ejemplos muestran cómo abrir una ventana hija, cómo cerrarla, cómo sacarla a primer plano. En la propia ventana hija se muestra cómo modificar el campo de formulario que aparece abajo, lo que resulta en un pequeño ejemplo de interacción entre ventanas.

abrir

<a href="javascript:void(0)" onClick="hija=window.open('poc ventana hija.htm'); return false;">

cerrar

<a href="javascript:void(0)" onClick="hija.close()">

focus

<a href="javascript:void(0)" onClick="hija.focus()">

Campo de ejemplo a modificar desde la ventana hija:

 

Por si la ventana hija de este ejemplo no estuviera disponible, he aquí su código fuente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>POC ventana hija en javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.exemplo {
background-color: #EEEEEE;
margin: 10px;
padding: 10px;
height: auto;
width: auto;
border: thin dashed #666666;
}
</style>
</head>
<body>
<p><a href="javascript:void(0)" onClick="window.opener.document.getElementById('formulario_poc_163').value = 'hola'; window.opener.focus(); return false;">Modificar valor en ventana madre</a>: pulsando el enlace se modifica el valor del elemento <code>'formulario_poc_163'</code> al tiempo que el foco se desplaza sobre la ventana madre: </p>
<div class="exemplo">
<p><code>&lt;a href=&quot;javascript:void(0)&quot; onClick=&quot;window.opener.document.getElementById('formulario_poc_163').value = 'hola'; window.opener.focus(); return false;&quot;&gt;</code></p>
<blockquote>
<p><code>Modificar valor en ventana madre</code></p>
</blockquote>
<p><code>&lt;/a&gt;</code></p>
</div>
</body>
</html>


29 comentarios

Bla Bla
Dice: , Miércoles 22 de Marzo de 2006

Como en los cuentos de magia, tu eres un cachondo. O lo que es lo mismo, el bufón.


Bla Bla
Dice: Acidonitrix, Sábado 15 de Abril de 2006

Sí, es cierto.


Bla Bla
Dice: Acidonitrix, Miércoles 22 de Noviembre de 2006

Hola Yuni. En ese caso, no pierdas el tiempo con bufones como nosotros.


Bla Bla
Dice: Sam, Lunes 15 de Enero de 2007

Hola, no hagas caso a esa gente Acidonitrix no merece la pena y gracias de los que si aprovechamos tus comentarios. Una cosa, me gustaria sabe como usar la comunicacion entre paginas para desde una pagina padre hacer visible una capa que esta oculta en otra pagina hija. Gracias


Bla Bla
Dice: Acidonitrix, Lunes 15 de Enero de 2007

Hola Sam. No te preocupes por nuestra autoestima, que tenemos suficiente.

Veamos tu pregunta. La prueba de concepto de ventanas hijas en realidad muestra cómo añadir un eslabón más al árbol de objetos mediante el que llegas a cada elemento. O sea, cómo invocar objetos que están en otro lado.

Dicho lo cual, si miras la llamada de la ventana hija, verás esto: onClick="window.opener.document.getElementById('formulario_poc_163').value = 'hola'

Aquí lo que importa es la sintaxis. Para llamar al elemento que invocarías así dentro la página:

document.getElementById('div_a_mostrar').display = block

si está en otra página lo invocarías...

window.opemer.document.getElementById('div_a_mostrar')... si está en la ventana madre

hija.document.getElementById('div_a_mostrar')... si está en la ventana hija.

Si miras el ejemplo con detenimiento, verás que el focus y el cambio de valor del formulario funcionan de esta manera.


Bla Bla
Dice: Elena, Lunes 22 de Enero de 2007

Hola! A ver si me podéis ayudar.
Tengo una página principal en la que abro una ventana secundaria llamando a la siguiente función:

var mipopup
function abre_ventana (url, nombre, atributos){
mipopup = window.open(url, nombre, atributos)
mipopup.focus()
}

El caso es que en la ventana que abro tengo un formulario que quiero procesar en la ventana padre. Por tanto quiero realizar el submit en la ventana secundaria, cerrarla y recargar la ventana padre.

En el popup tengo:

(Campos del formulario) y un input type="button" value="Enviar" onClick="Enviar()"

La funcion Enviar() es la siguiente:
function Enviar()
{
document.forms[0].action = "prueba.php";
document.forms[0].submit();
window.close();
}

Consigo que me cierre la ventana y regrese a la pagina padre pero no realiza el submit de los datos. Alguna ayuda? Mil gracias!


Bla Bla
Dice: Acidonitrix, Miércoles 24 de Enero de 2007

Hola Elena:

hubiese querido dedicarle más tiempo a probarlo, pero habrá que esperar a una solución más detallada. Si quitas el close(), podrías comprobar si hay errores de javascript, y si el formulario se envía. Tal vez, si haces close estés interrumpiendo el submit.

Otra cosa que deberías hacer es cambiar document.forms[0] por document.getElementById('IDDELFORMULARIO')

Antes de hacer el submit, podrías comprobar que se hace la llamada correctamente, cambiando la acción submit por otra. Por ejemplo, cambiando el valor de un campo. La idea es comprobar que la llamada ocurre correctamente.


Bla Bla
Dice: Gabriel Silva, Martes 20 de Febrero de 2007

Tengo algo similar a Elena, pero mi caso es el sig.:
del window principal llamo a un iframe el cual contiene un formulario (frame[0].form[0]) y desde el formulario abro una nueva ventana (pop up) que le regresa un valor a un input text.

Desde el window principal (el parent del iframe) tengo un boton de enviar datos el cual si lo oprimo sin abrir el popup del formulario envia bien los datos (esto se lo hice con ...form[0].submit();) pero si abro el pop up y despues le doy al boton de enviar datos si recarga el frame pero manda a llamar al pop up y no al iframe original. Espero me entiendan pero lo que necesito es como le hago para que en verdad llame al fromulario del iframe original.


Bla Bla
Dice: oscar, Viernes 23 de Febrero de 2007

Hola, tengo una consulta y por lo visto en el manual es pòsible que encuntre respuesta aqui, tengo una ventana padre y esta abre una ventana hija, dentro de ella hay algunas funciones javascript que interactuan con una applicacion flash, desde la ventana padre puedo llamar a dichas funciones usando la misma estructura explicada en este manual, el problema surge cuando dentro de la ventana padre(no abro otra ventana de navegador sino que uso un enlace para dirigirme a otra parte del site), me dirijo a otra pagina, que tambien trata de llamar a las funciones de la ventana hija, pero me da un error pues esta desconoce la existencia de la ventana hija, quisiera saber si hay alguna forma de solucionar esto, ya he preguntado en algunos foros y no he obtenido respuesta, aunque he visto un sitio que lo ha realizado djdownload.com el problema es que su codigo es todo un desorden, pero al parecer lo han hecho usando solo javascript. Gracias por su tiempo.


Bla Bla
Dice: Acidonitrix, Domingo 25 de Febrero de 2007

Un saludo para Oscar y Gabriel Silva. Para estas dudas, tardaremos unos días en poder dedicar el tiempo suficiente. Recibid nuestras disculpas.


Bla Bla
Dice: oscar, Lunes 26 de Febrero de 2007

Muchas Gracias :)


Bla Bla
Dice: Victor, Lunes 5 de Marzo de 2007

Hola, tengo el siguiente problema, abro un popup con este codigo:

function ShowPopUpWithSize(pUrl, pHeight, pWidth)
{
SWGuardianWindowOpen(pUrl, '_blank','left=0, top=0, height=' + pHeight + ' width=' + pWidth + ', status=no, resizable=no, scrollbars=no,titlebar=no,fullscreen= no,directories=no, channelmode= no ,toolbar=no,location=no, menubar=no')
}

Pero la pagina principal me hace postback, he intentado de mil formas, incluyendo el "return false", pero nada...


Bla Bla
Dice: Hernan Dario, Miércoles 25 de Abril de 2007

Tengo un apagina web en la que diseñe un test de preguntas con opcion multiple, pero necesito llamr un campo de esa pagina a un formulario en otra pagina, alguien puede ayudarme.?


Bla Bla
Dice: Acidonitrix, Sábado 28 de Abril de 2007

Hola Hernán. Si lo que quieres es enviar datos de una página a otra, deberás procesarlos con cualquier lenguaje de scripting en servidor como ASP, PHP, etc, lo que resultaría difícil de explicar en tan poco espacio.

Si lo que quieres es enviar datos entre ventanas usa el ejemplo que viene en esta misma página.


Bla Bla
Dice: jose, Viernes 25 de Mayo de 2007

que pongo en la pagina madre para llamar ala pagina hija


Bla Bla
Dice: Acidonitrix, Sábado 26 de Mayo de 2007

Hola José. Lo que buscas está en el texto de la nota.


Bla Bla
Dice: vicky, Jueves 19 de Julio de 2007

Hola,
Excelente tu forma de volver a levantar una ventana hija ya abierta, pero solo funciona en firefox :( y para ie?
Gracias,


Bla Bla
Dice: vicky, Viernes 20 de Julio de 2007

Consultita, y como podria cerrar una ventana hija que se abre de uno de los frames de toda una pagina cuando se intenta cerrar toda la ventana desde otro frame de la misma pagina?
Esto es:
frame1
frame2
frame3

Desde frame1 abro una ventana hija.
Luego desde frame3 se cierra toda la pagina, como capturo el nombre de la ventana hijap para cerrarla?
Gracias miles,


Bla Bla
Dice: jesu.., Jueves 23 de Agosto de 2007

Hola, muy todos los ejemplos me han servido, la consulta es: dentro de una plantilla tengo un iframe con el cual llama a una pagina con un formulario, quisiera saber como poder desde la plantilla principal hacer que reciba el foco un objeto del formulario dentro del iframe..
gracias


Bla Bla
Dice: Lisa, Lunes 12 de Noviembre de 2007

Hola disculpa, sera que me puedes ayudar. yo tengo una pagina que tiene 3 frame y quiero hacer submit desde un frame a los otros dos frame (por si acaso no actualizar, tiene que ser un submit), agradecere mucho su ayuda. gracias


Bla Bla
Dice: alejandro, Domingo 18 de Noviembre de 2007

Hola.. una consulta... como puedo darle un refresh() a la pagina madre una vez termino de hacer lo que quiero en la hija y esta se cierra ???


Bla Bla
Dice: qqqqqqqqqqqq, Viernes 23 de Noviembre de 2007

``````````````


Bla Bla
Dice: Sebastián, Lunes 16 de Junio de 2008

Hola Acidonitrix, yo ando con la misma duda.
Yo necesito hacer que de una ventana secundaria, en base a un formulario que tengo me tome todas las opciones y cuando le ponga enviar que se cierre y vaya a la ventana primaria.
De este modo en la ventana primaria tendría el valor de las variables de la ventana secundaria.
Se que lo pusiste arriba, pero necesito que me mandes el codigo bien separado, que hago en prima y que hago en secu. Dale?. Para entenderlo mejor, cabe decir que apenas comienzo y el lenguaje esta en estudio. muchas Graxias Abrazo.


Bla Bla
Dice: pablosky, Viernes 20 de Junio de 2008

hola a todos...no tengo casi ni idea de javascript pero estoy haciendo un programa en html y tengo un par de preguntas para no estar haciendo constantemente htmls con cada posibilidad que desarrollo. Las preguntas son:
1.- por un lado quiero dar una serie de opciones que luego irian a otra pagina donde saldria la opcion elegida (la cadena de texto elegida) concatenada con un texto comun que yo escribiria, pero no quiero hacer una pagina por opcion, sino que en la de resultado saliese esa opcion elegida (como variable)Por ejemplo:
opcion 1. estoy muy bien
opcion 2. estoy muy mal
siguiente
va a otra pagina que dice: "aunque estoy muy bien (si es la opcion 1 la elegida) quiero continuar con esto"
2.- por el otro, lo mismo pero con un formulario de una, o sea, permito a la persona que escriba una serie de palabras y que al darle a siguiente fuera a una pagina donde esas palabras se concatenen a otras fijas por mi. Por ejemplo: un campo nombre, donde la persona ingresa su nombre que al darle a enviar le lleva a otra pagina donde sale Buenos dias, pepe, bienvenido a mi web (si el nombre ingresado es pepe)
se que es una chorrada pero no se hacerlo
necesitaria el codigo y donde va en la primera pagina y el codigo y donde va en la segunda, gracias.


Bla Bla
Dice: pablosky, Viernes 20 de Junio de 2008

hola a todos...no tengo casi ni idea de javascript pero estoy haciendo un programa en html y tengo un par de preguntas para no estar haciendo constantemente htmls con cada posibilidad que desarrollo. Las preguntas son:
1.- por un lado quiero dar una serie de opciones que luego irian a otra pagina donde saldria la opcion elegida (la cadena de texto elegida) concatenada con un texto comun que yo escribiria, pero no quiero hacer una pagina por opcion, sino que en la de resultado saliese esa opcion elegida (como variable)Por ejemplo:
opcion 1. estoy muy bien
opcion 2. estoy muy mal
siguiente
va a otra pagina que dice: "aunque estoy muy bien (si es la opcion 1 la elegida) quiero continuar con esto"
2.- por el otro, lo mismo pero con un formulario de una, o sea, permito a la persona que escriba una serie de palabras y que al darle a siguiente fuera a una pagina donde esas palabras se concatenen a otras fijas por mi. Por ejemplo: un campo nombre, donde la persona ingresa su nombre que al darle a enviar le lleva a otra pagina donde sale Buenos dias, pepe, bienvenido a mi web (si el nombre ingresado es pepe)
se que es una chorrada pero no se hacerlo
necesitaria el codigo y donde va en la primera pagina y el codigo y donde va en la segunda, gracias.


Bla Bla
Dice: Acidonitrix, Viernes 20 de Junio de 2008

Hola Sebastián:

tienes el código de ejemplo separado en las ventanas de demostración. No tienes más que echar un vistazo al código fuente.

Quizá debas estudiarlo con más detenimiento, o realizar otros ejercicios antes de abordar tu proyecto.


Bla Bla
Dice: Acidonitrix, Viernes 20 de Junio de 2008

Hola Pablosky.

Lo que pides significa que vas un poco deprisa. Necesitas estudiar más para entender cómo funciona el lenguaje, y cómo se usan operadores elementales para concatenar cadenas.

Javascript no es la opción ideal, ya que no tiene bien resuelto el paso de parámetros. Deberías descomponer el referer para obtener las variables que llegan por GET (POST no te vale).

Aquí tienes una pista:

http://www.simbiontes.com/archives/codeblog/detectar-referrer-y-parametros-de-almohadilla-ancla-con-javascript.php

Pero insisto en que la solución es aparatosa y poco satisfactoria. Si puedes, usa ASP o PHP.


Bla Bla
Dice: LiZzY, Miércoles 16 de Julio de 2008

Como puedo pasar los valores de varios checkbox que tengo en una ventana hija a un textbox que tengo en la ventana padre separandolos por comas??

si alguien me puede ayudar por favor!!
en ninguna parte me han resuelto esa duda!!!
gracias


Bla Bla
Dice: , Lunes 5 de Abril de 2010

Hola mi duda es la siguiente, abro un popup desde una ventana madre, luego tengo un select en la ventana hija, alli selecciono una opcion y este me duvuelve el valor a la ventana madre cuando doy en un boton de aceptar en la hija, pero lo que necesito es que dependiendo del valor devuelto del select por la ventana hija, la ventena madre me ejecute una funcion.

Gracias



Enviar un comentario










Introduce el código que aparece aquí...
Recordar información personal en este PC...







Mostrar búsqueda avanzadaActivar búsqueda avanzada

Bienvenido al repositorio de los simbiontes

Una página colectiva y ecléctica para comentar y apuntar cosas.

Estás viendo los archivos de Julio de 2005. Visita la portada para ver las últimas notas.

Sugerencias de lectura

Los simbiontes hablan de...

Sugerencias de lectura

Si quieres curiosear, puedes consultar:

  • todas las entradas archivadas por categoría (abstract).
  • Las entradas ordenadas mensualmente.
  • Suscribirte a los feeds (más abajo).
  • Lo que vienen buscando otras personas.
  • Si lo prefieres, puedes ver la portada en el formato anterior.
  • ...o leer la presentación para saber qué es esto y si puedes fiarte o no de lo que aquí se dice, y por qué pensamos que esto no es un blog aunque lo llamemos así para entendernos entre nosotros.

Sindicación RSS

  • ¿Qué es un feed?
  • Agregadores recomentados

Lecturas edificantes y tráfico de influencias

La tira Ecol

Tira Ecol

http://tira.escomposlinux.org
La tira ecol ha vuelto.