DesarrolloWeb.com > Manuales > Taller de Javascript / Control de ventanas secundarias, popups, con Javascript

Submenú en otra ventana

Valoración del artículo:

Ver comentarios del artículo (22)

Hacemos un submenú de opciones que se muestra en una ventana secundaria y ona vez seleccionada la opción del submenú se traspasa a la ventana padre.

Por Miguel Angel Alvarez

Publicado: 27/11/01

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Vamos a realizar un pequeño ejemplo sobre cómo trabajar con ventanas secundarias o popups. Las ventanas secundarias son esas ventanitas que se abren a parte de la ventana principal del navegador y por lo general molestan un poco en determinados sitios gratuitos.

Para abrir esas ventanas se utiliza el lenguaje Javascript, más concretamente, el método open() del objeto window. No lo vamos a explicar aquí, porque ya tenemos un reportaje entero que explica detenidamente la apertura de ventanas secundarias y las características con las que las podemos abrir: Abrir ventanas secundarias

En este ejemplo vamos a ir un poco más allá, vamos a crear una ventana secundaria y desde ella vamos a acceder a las propiedades de la ventana padre, es decir, la ventana que la abrió. El ejercicio será el siguiente:

Tendremos una página con fondo blanco, un campo de texto vacío y un botón. Cuando se pulse el botón abriremos un popup que contendrá una tabla con los colores puros de HTML. El visitante podrá seleccionar uno de esos colores y entonces el fondo de la página padre cambiará a ese color y el color se escribirá en el campo de texto. Es mucho más fácil ver el ejemplo en marcha para comprender la explicación.

Página padre

La página original contendrá un simple formulario con un botón y un campo de texto. Además, contendrá el script Javascript necesario para abrir la ventana secundaria.

<html>
<head>
    <title>Submenú en ventana a parte</title>
<script language="JavaScript">
function lanzarSubmenu(){
   window.open("submenu_ventana2.html","ventana1","width=400,height=400,scrollbars=YES")
}
</script>
</head>
<body bgcolor="#ffffff">
<form>
<input type="text" name="colorin" size="12" maxlength="12">
<br>
<br>
<input type="button" value="Lanzar submenu" onclick="lanzarSubmenu()">
</form>
</body>
</html>

La función lanzarSubmenu() es la que contiene el script para abrir el popup. Para ello utiliza el método open() del objeto window, cuyo uso se describió en el artículo de Abrir ventanas secundarias.

El formulario es de lo más normal. Lo único destacable es el atributo onclick del botón, que sirve para definir las acciones a ejecutar cuando se pulsa el botón, en este caso una llamada a la función que abre la ventana secundaria.

Página secundaria

La página secundaria es un poco más compleja, pero la parte que nos importa a nosotros en este ejercicio es muy sencilla. Lo importante de la página es que tiene que acceder a la ventana padre para modificar su estado y para ello utiliza un objeto Javascript: opener.

El objeto opener está disponible en las páginas que son ventanas secundarias y hace referencia a la ventana que la abrió, es decir, la ventana padre. Dicho de otro modo, el objeto opener en la ventana popup es un sinónimo del objeto window en la ventana padre.

El script que accede a la ventana padre es el siguiente:

<script language="JavaScript">
function actualizaPadre(miColor){
    window.opener.document.bgColor = miColor
    window.opener.document.forms[0].colorin.value = miColor
}
</script>

La función actualizaPadre() es la encargada de realizar el trabajo. Recibe el código del color sobre el que se ha pulsado. En la primera línea cambiamos el color de la página web padre y en la segunda línea colocamos el código RGB del color recibido por parámetro en el campo de texto.

Como vemos, el objeto opener también depende del objeto window de la página, como todos los demás objetos de la jerarquía Javascript.

El resto de la página es parecido a un taller anterior de Javascript en el que escribíamos con Javascript una tabla de colores puros, con unas pequeñas modificaciones para adaptarla a nuestras necesidades. Se puede ver a continuación.

<table width="80%" align="center" cellpadding="1" cellspacing="1">
<script language="javascript">
var r = new Array("00","33","66","99","CC","FF");
var g = new Array("00","33","66","99","CC","FF");
var b = new Array("00","33","66","99","CC","FF");
for (i=0;i<r.length;i++)
    for (j=0;j<g.length;j++) {
       document.write("<tr>");
       for (k=0;k<b.length;k++) {
          var nuevoc = "#" + r[i] + g[j] + b[k];
          document.write("<td bgcolor=\"" + nuevoc + "\" align=center><font size=1 face=verdana>");
          document.write("<a href=\"javascript:actualizaPadre('" + nuevoc + "')\">");
          document.write(nuevoc);
       }
       document.write("</a></font></tr>");
    }
</script>
</table>

Vista la complicación de este script y dado que no vamos a explicarlo todo otra vez, puede ser altamente recomendable la lectura del artículo Tabla de colores con Javascript.

Lo importante para nosotros ahora es entender que este script crea una tabla con todos los colores puros, colocados en una celda cada uno. Dentro de cada celda se escribe un enlace que llama a la función actualizaPadre() pasándole el código del color se ha de utilizar.

Podemos ver el ejemplo en funcionamiento.

Enviar un comentario al artículo

MANUAL: Taller de Javascript

Tabla de colores con Javascript

Degradado de color Javascript

MANUAL: Control de ventanas secundarias, popups, con Javascript

Cerrar ventanas con Javascript

Popups DHTML – OpenPopups

Comentarios

Enviar un comentario al artículo

Fueron enviados 22 comentarios al artículo

3 comentarios no revisados

19 comentarios revisados:

Por: Miguel Angel Alvarez

28/11/01

Y para acabar de dar nociones del uso de ventanas habría que señalar también qué significado tiene el segundo parámetro de window.open().

window.open("p.html","nom","width=200,height=500")

En ese ejemplo el segundo parámetro es "nom" y es el nombre que le damos a la ventana para referirnos a ella con HTML. Con esa referencia, podríamos hacer un enlace que actualice el contenido del popup indicándolo con el atributo target:

<a href="pagina.html" target="nom">Enlace<a>

Por: Miguel Angel Alvarez

28/11/01

Es improtante señalar que también se puede realizar un acceso desde la ventana padre a la ventana popup para realizar cualquier acción Javascript.

Para ello utilizamos la variable que retorna el método window.open() al abrir el popup.

Para guardar esa variable haríamos esto:

mi_popup = window.open("p.html","nom","width=200,height=500")

Esa variable es un sinónimo del objeto window del popup, así que para cambiar el color de fondo del popup haríamos así:

mi_popup.document.bgColor = "red"

Por: Gustavo Karcher

04/7/02

¿Existe alguna posibilidad de abrir una ventana pop (POP-UP) y desde ésta hacer cerrar automáticamente la ventana padre desde el método opener?

Respuesta

Opener no es un método, es un atributo del objeto window. Salvo esa corrección, tu pregunta es interesante:

Para conseguir cerrar la ventana padre desde la ventana hija ejecutaríamos esta sentencia:

window.opener.close()

Que no es más que una llamada al método close() del objeto window de la ventana padre... lo que cerraría la ventana padre.

Una consideración interesante es saber que si la ventana padre -o la que deseemos cerrar con el método close()- no se abrió con javascript, antes de que se cierre la ventana se preguntará al visitante si desea realmente cerrarla con una caja de confirmación.

Por: Gustavo Karcher

08/7/02

Hace mucho programé una página index que se abría, creaba una ventana a pantalla completa con el método open(), se cerraba automáticamente y dejaba la nueva ventana abierta para navegar. Los otros días, probando una pequeña modificación descubrí que el Explorer 6 de Windows me ponía una ventanita de confirmación que echó por tierra toda mi sólida programación. Me pareció espeluznante! Yo programo window.close() y el navegador se inmiscuye sin ninguna razón en mi rutina. Es espantoso!!! ...pero real. Han inventado la rueda cuadrada!!! ¿Será posible que sean tan estúpidos los de Microsoft? ¿Por qué no inventan un código que permita abrir una página index a pantalla completa (vieja demanda de todo el mundo) en lugar de "reinventar" estas barbaridades?

Por: Jose

06/9/02

Pues algunos odiamos esas páginas que se abren hasta el infinito y ocupan toda la pantalla del ordenador, tapando las demás ventanas que estamos cargando, para demostrar que algunos programadores sólo piensan en ellos mismos y creen que sus páginas es lo único que deseamos ver, sin pensar que pueden molestar a sus visualizadores, que no volverán a visitar ese sitio...

Por: STC Pimus

12/9/02

Hola
Yo tambien estoy fabricando una aplicacion a pantalla completa full-screen..
Y la unica manera que conosco es desde un index.html abrir una con el objeto opener y a pantalla completa... pero cuando quiero cerrar la ventana padre me sale ese estupido letrero de que si deseo cerrarla...

Pero yo pienso que esto lo desarrollaron asi los de Microsoft porque algo tienen entre manos, tal vez descubrieron un bug y al no poderlo arreglar mejor lo machetearon con alguna cosa como esa estupida ventana.

Nota de redacción

Yo creo que esto lo hacen por temas de seguridad en los scripts de Javascript. A mi me parece lógico que pregunten al usuario si desea que javascript cierre la ventana con la que está navegando, por mucho que se haya abierto otra ventana a tamaño completo, que generalmente no sirve para continuar la navegación con libertad porque no suele tener los menús, barra de direcciones, etc.

Por: Belen

13/9/02

Tengo una vantana padre con un link que carga una ventana hija. A su vez la ventana hija tiene un link con información que debe cargarse en la ventana padre. Hasta aquí las explicaciones de tu web funcionan de maravilla (no tengo ni idea de java). El problema me surge porque la ventana hija está compuesta por marcos y da error del tipo "window.opener.location es nulo o no es un objeto".

RESPUESTA

La cosa se complica con los marcos o frames. Realmente la página que tiene el enlace con "opener" (la ventana padre) es la declaración de frames. Para acceder a la declaración de frames escribe "parent". Da igual, si no entiendes nada, prueba esto:

window.parent.opener.location

Por: Juan Albero Mateo

23/2/03

El WebMastEl WebMaster siempre debe tener la posibilidad de expulsar a quién no respete las normas.
Para cerrar una ventana sin previo aviso basta con:
window.opener = "madre";
window.close();

Por: Paulina

17/9/03

Tengo la pagina con una consulta a un bd, a lado de estos datos un link Editar, cuando doy clic se abre una ventana popup, hago los cambios y al dar Aceptar quiero que la ventana padre se actualice sola con los cambios q hice en la popup, ya probe: window.parent.opener.location.reload, window.opener.reload, y esas combinaciones pero no funciona.

Por: GoVeM

30/1/04

Paulina, para eso usa:

window.opener.location.reload()

tenia el mismo problema tuyo, busque y asi funciono.

Por: Fernando Cuadrado

25/2/04

Seria interesante pensar en una ventana NIETA no?... el problema que tengo es que la ventana hija se actualiza porque es un .php de confirmacion, se ve una vista previa y luego da las gracias... despues de eso deberia borrar el formulario pero dice "Acceso denegado"... espero que alguien me pueda tirar una mano con esto. Saludos

Por: Luis

21/2/05

He realizado una ventana desde la que se seleccionan los valores que tendrá la ventana padre en un campo.
La forma en la que lo he conseguido es con...
window.parent.opener.nombreFormulario.elements["nombreCampo"].propiedad

Por: Sargento Chinicuil

15/3/05

Para actualizar el padre, es suficiente con realizar esto desde el hijo:
window.opener.parent.document.execCommand('refresh');

Por: cristian

26/8/05

hola... como puedo en u formulario padre llenar un campo select con una lista de valores q tengo en una variable desde un formulario hijo.
por ejemplo
opener.document.form.idafe.value=idafe;
pero para un select (combobox) no me resulta
gracias desde chile

Por: erik

05/9/05

tienes que crear una función javascript en la ventana padre la cual reciba los datos de la ventana hijo y esta función va agregando los datos al select en la ventana padre.
Desde la ventana hij@ tu haces la consulta en la base y los datos que obtienes los vas mandando a la función de la ventana padre.

De esa manera no tendrás ni un problema.

Pues llenar un select directamente de una ventana a otra al parecer no se puede hacer.

Por: Francisco

15/9/05

Holas, tengo una ventana popup pero me gustaría que ese popup permanesca siempre alfrente hasta que el usuario hagaclic en aceptar o bien cierre el popup (como el efecto .show (modal=si,form=nbform) de visual basic).

de ante mano, muchas gracias...

Por: Laura

27/9/05

Francisco, tambien existe una función showModal() en javascript

Por: Claudia

04/8/06

Tuve un problema similar.

Esta pagina me ayudo mucho, te recomiendo que la cheques

http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/showModalDialog.htm

Por: Ignacio

19/1/07

Tengo una ventana "abridora" con una url http://dirIP1/
Realizo un window.open(url,'ventana2',opciones) donde la url que le paso es http://dirIP2/
Si desde la ventana2 llamo a la propiedad window.opener me presenta un "Error al intentar ejecutar el script"
Esto no ocurre en el caso de que la dirIP sea la misma para ambos (localhost,etc)
¿tenéis alguna idea de qué pueda ser?

Ver otros 3 comentarios pendientes de revisar

Enviar un comentario al artículo