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.
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...