 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Submenú en otra ventana
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.
27/11/01 - 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.
+ 1 categoria relacionada
+ 17 comentarios (Añadir)
+ 12 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestran 17 comentarios revisados |
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>
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"
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.
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.
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
Para cerrar una ventana sin previo aviso basta con:
window.opener = "madre";
window.close();
window.opener.location.reload()
tenia el mismo problema tuyo, busque y asi funciono.
La forma en la que lo he conseguido es con...
window.parent.opener.nombreFormulario.elements["nombreCampo"].propiedad
window.opener.parent.document.execCommand('refresh');
por ejemplo
opener.document.form.idafe.value=idafe;
pero para un select (combobox) no me resulta
gracias desde chile
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.
de ante mano, muchas gracias...
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||
Tienda DesarrolloWeb
