Submenú en otra ventana

  • Por
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.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Miguel Angel Alvarez

28/11/2001
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>

Miguel Angel Alvarez

28/11/2001
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"

Gustavo Karcher

04/7/2002
¿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.

Gustavo Karcher

08/7/2002
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?

Jose

06/9/2002
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...

STC Pimus

12/9/2002
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.

Belen

13/9/2002
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

Juan Albero Mateo

23/2/2003
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();

Paulina

17/9/2003
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.

GoVeM

30/1/2004
Paulina, para eso usa:

window.opener.location.reload()

tenia el mismo problema tuyo, busque y asi funciono.

Fernando Cuadrado

25/2/2004
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

Luis

21/2/2005
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

Sargento Chinicuil

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

cristian

26/8/2005
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

erik

05/9/2005
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.

Francisco

15/9/2005
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...

Laura

27/9/2005
Francisco, tambien existe una función showModal() en javascript

Claudia

04/8/2006
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

Ignacio

19/1/2007
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?

Guillermo

22/4/2009
Ayuda con ventana pop??
Tengo una ventana padre que se llama equipo, cuando presiono un imagebutton y me habre otra ventana asp que me trae los codigos de lo equipos y los nombres, ya tengo los metodos para seleccionar de la base y todo eso, pero cuando quiero devolver el nombre del equipo a un input de tipo texto de la ventana padre(equipo) no me lo hace alguien me puede ayudar.

Estoy usando para retornar el valor el metodo:

input de ventana padre
|
V
window.opener.document.forms[0].txtcod.value ="+user2+";"
^
|
valor de la ventana hija

miguel arcod

29/5/2009
window.opener.location.reload
<BODY onload="window.opener.location.reload(true); setTimeout('top.close()',1000)">


Deben verificar que su explorador acepte ventanas emergentes de lo contrario no funcionara. ver Herramientas
<script>
setTimeout("cerrar()",0);
function cerrar()
{
window.close();
}
</script>

mia

06/10/2009
caca
muy malo muy pero muy malo

Sandra Marcela

03/10/2012
problema con javascript en navegadores diferentes a IE
Hola, agradecería inmensamente a quien me pueda ayudar con este problema, tengo un sistema que abre 4 ventanas como frames y con los datos de las ventanas hijos se alimenta la principal, el problema es que utilizo el

javascript:

parent.arriba.location.reload(true)

(donde arriba es el nombre del frame)

En IE funciona perfecto pero en cualquier otro navegador se queda en una recarga infinita alguna pista?

jean

18/12/2014
problema con internet explorer
Al quien me puede ayudar, estoy usando este script en .NET
window.parent.location.reload();
sale un mensaje dice(para mostrar de nuevo esta pagina web el explorador debe volver a enviar la informacion que ya envio anteriormente. si estaba realizando una compra haga clic en cancelar para evitar que la transaccion se realice dos veces.)
la aplicacion es para Internet explorer .