CONTROL DE VENTANAS SECUNDARIAS, POPUPS, CON JAVASCRIPT Aprendemos todos los entresijos de Javascript para controlar las ventanas

secundarias, tambin llamadas popups. Aprendemos a abrirlas, cerrarlas, pasar datos desde unas ventanas a otras, etc. I. Control de ventanas secundarias en Javascript Prlogo del manual sobre el tratamiento y control de ventanas secundarias, o popups, en Javascript. Una de las utilidades ms interesantes de Javascript es el control de ventanas secundarias (popups en ingls). Las ventanas secundarias son las que se abren adicionalmente a la ventana principal del navegador. Suelen ser ms pequeas que las ventanas normales y generalmente no tienen los mens del navegador, barra de direcciones, etc. Con Javascript podemos controlar los popups para hacer cosas como abrirlos, cerrarlos, darles el foco, pasar informacin de una ventana a otra, etc. En este manual veremos cmo se hacen todas estas cosas con las ventanas secundarias para aprender a controlarlas perfectamente. El ndice que vamos a tratar con respecto al tema de las ventanas secundarias o popups es el siguiente: 1. Abrir ventanas secundarias 2. Comunicacin entre ventanas 2.1. Acceso desde ventana principal a ventana secundaria 2.2. Acceso desde ventana secundaria a ventana principal 2.3. Acceso a variables y funciones de otras ventanas 3. Cerrar Ventanas Abrir ventanas secundarias en Javascript Breve descripcin de la forma de abrir ventanas secundarias con el lenguaje Javascript. Para ello utilizamos el mtodo open del objeto window, que es el encargado de abrir la ventana. La sintaxis del mtodo es la siguiente. window.open(URL,nombre_ventana,parametros_configuracin) El primer parmentro es la URL de la pgina que deseamos mostrar en la ventana secundaria. El segundo parmetro es el nombre que le damos a la ventana. Este nombre es utilizable desde el HTML para que sirva como target de enlaces o formularios. Es decir, si colocamos un enlace y queremos que actualice la ventana secundaria ponemos el atributo TARGET del enlace igual al nombre de la ventana. El tercer parmetro es la configuracin de la ventana, para indicar el tamao, qu barras de mens se tienen que ver y cules no, si tiene o no barras de desplazamiento, etc. A continuacin podemos ver un ejemplo de utilizacin del mtodo open. window.open("pagina.html","miventana","width=300,height=200,menubar=no")

II.

III.

Apertura y configuracin de popups con javascript Este artculo te ensear en profundidad como abrir ventanas secundarias y configurar su forma. En determinadas ocasiones es muy til abrir un enlace en una ventana secundaria, es decir, una ventana aparte que se abre para mostrar una informacin especfica. Algunas ventajas de abrir un enlace en una ventana secundaria pueden ser que: El usuario no se marcha de la pgina donde estaba el enlace. La ventana secundaria se puede configurar libremente con lo que se pueden hacer ventanas ms grandes o pequeas y con ms o menos mens. En general, el grado de control de la ventana secundaria utilizando Javascript aumenta. Para abrir una ventana secundaria podemos hacerlo de dos maneras, con HTML y con Javascript. Veamos cada una de ellas Abrir una ventana con HTML Se puede conseguir abrir una ventana secundaria muy fcilmente con tan solo HTML. Para ello podemos utilizar el atributo TARGET de las etiquetas HREF. Si ponemos target="_blank" en el enlace, la pgina se abrir en una ventana secundaria. Tambin podemos poner target="xxx" para que el enlace presente la ventana llamada xxx o en el frame xxx. El enlace tendra que tener esta forma: <a href="mipagina.html" target="_blank"> El problema de abrir una pgina secundaria con HTML consiste en que no podemos definir la forma de sta ni podremos ejercer mayor control sobre lla, tal como comentbamos entre las ventajas de abrir una ventana secundria con Javascript. La ventana que se abre siempre ser como el usuario tenga definido por defecto en su navegador. Abrir una ventana con Javascript Para abrir una ventana con Javascript podemos utilizar la sentencia window.open(). No pasa nada porque no conozcas Javascript, puesto que es muy sencillo utilizarlo para este caso. Vamos a ver paso a paso cmo abrir una ventana secundaria utilizando Javascript. 1. Sentencia Javascript para abrir una ventana La sentencia es simplemente la funcin window.open(), lo ms complicado es saber cmo utilizar esa funcin, pero ahora veremos que no reviste ninguna complicacin. La funcin window.open() recibe tres parmetros, que se colocan dentro de los parntesis, de este modo: window.open(URL,nombre_de_la_ventana,forma_de_la_ventana) Veamos rpidamente cada uno de estos parmetros por separado.

URL: representa el URL que deseamos abrir en la ventana secundaria, por ejemplo http://www.desarrolloweb.com nombre_de_la_ventana: es el nombre que se le asigna a esta ventana para dirigir enlaces con el atributo target del HTML forma_de_la_ventana: se indica el aspecto que va a tener la ventana secundaria. Por ejemplo se puede definir su altura, anchura, si tiene barras de desplazamiento, etc Veamos un ejemplo de sentencia Javascript completa para abrir una ventana secundaria: window.open("http://www.desarrolloweb.com" , "ventana1" , "width=120,height=300,scrollbars=NO") Esto quiere decir que abra la pgina inicial de desarrolloweb.com en una ventana secundaria a la que vamos a llamar ventana1. Adems, la ventana ser de 120 pixels de ancho, 300 de alto y no tendr barras de desplazamiento. Una aclaracin adicional, si despus de abrir esa ventana colocamos otro enlace en la pgina que abra la ventana cuyo atributo target est dirigido hacia el nombre_de_la_ventana (en este caso ventana1), este enlace se mostrar en la ventana secundaria. 2. Funcin que abre una ventana Lo ms cmodo para abrir una ventana es colocar una funcin Javascript que se encarge de las tareas de abrirla y que reciba por parmetro la URL que se desea abrir. El script es sencillo, vemoslo a continuacin: <script language=javascript> function ventanaSecundaria (URL){ window.open(URL,"ventana1","width=120,height=300,scrollbars=NO") } </script> 3. Colocamos un enlace Este enlace no debe estar dirigido directamente a la pgina que queramos abrir, sino a la sentencia Javascript necesaria para abrir la ventana secundaria. Para ejecutar una sentencia Javascript con la pulsacin de un enlace lo hacemos as: <a href="javascript:sentencia_javascript_para_abrir_la_ventana"> 4. El enlace llama a la funcin que abre la ventana Ahora Veamos cmo quedara todo ese enlace en la pgina. <a href="javascript:ventanaSecundaria('http://www.desarrolloweb.com')"> Pincha en este enlace para abrir la ventana secundaria</a>

Hay que fijarse que las comillas simples que se colocan para definir el URL que se pasa como parmetro de la funcin ventanaSecundaria(). Son comillas simples porque el href del enlace ya tiene unas comillas dobles, y dentro de comillas dobles siempre se han de utilizar comillas simples a no ser que deseemos cerrar las comillas dobles. Parmetros para dar forma a una ventana Estos atributos los puedes utilizar en la funcin window.open() para definir la forma que deseas que tenga tu ventana secundaria.
Width Height Ajusta el ancho de la ventana. En pixels Ajusta el alto de la ventana Indica la posicin de la ventana. En concreto es la distancia en pixels que existe entre el borde superior de la pantalla y el borde superior de la ventana. Indica la posicin de la ventana. En concreto es la distancia en pixels que existe entre el borde izquierdo de la pantalla y el borde izquierdo de la ventana. Para definir de forma exacta si salen o no las barras de desplazamiento. scrollbars=NO hace que nunca salgan. Scrollbars=YES hace que salgan (siempre en ie y solo si son necesarias en NTS). Establece si se puede o no modificar el tamao de la ventana. Con resizable=YES se puede modificar el tamao y con resizable=NO se consigue un tamao fijo. A partir de aqu se enumeran otra serie de propiedades que sirven para mostrar o no un elemento de la barra de navegacin que tienen los navegadores ms populares, como podra ser la barra de mens o la barra de estado. Cuando ponemos el atributo=YES estamos forzando a que ese elemento se vea. Cuando ponemos atributo=NO lo que hacemos es evitar que ese elemento se vea.

Top

Left

Scrollbars

Resizable

Directories (barra directorios)

Location (barra direcciones) Menubar (barra de mens) Status (barra de estado) Titlebar (la barra del ttulo) Toolbar (barra de herramientas)

Abrir una ventana sin un enlace En otras ocasiones desearemos abrir una ventana secundaria automticamente, es decir, sin necesidad de que el usuario pulse sobre ningn enlace. En este caso, el cdigo de la funcin ventanaSecundaria nos sirve tambin y habr que aadir una lnea de cdigo Javascript a continuacin de la funcin ventanaSecundaria. Esta lnea a aadir

simplemente ser una llamada a la funcin que se ejecutar segn se est cargando la pgina. Veamos como quedara este cdigo: <script language=javascript> function ventanaSecundaria (URL){ window.open(URL,"ventana1","width=120,height=300,scrollbars=NO") } ventanaSecundaria("http://www.desarrolloweb.com"); </script> Queda en negrita lo que sera la llamada a la funcin que abre la ventana secundaria, como est fuera de una funcin se ejecuta segn se est cargando la pgina. IV. Comunicacin entre ventanas Podemos pasar datos de unas ventanas a otras, llamar a funciones y realizar comunicaciones en general para interactuar con las ventanas. Aprendemos tambin a asignar nombres a ventanas secundarias. La gracia del trabajo con ventanas secundarias consiste en que tanto la ventana principal como el popup se puedan comunicar entre si y mandarse rdenes y comandos desde una a la otra. La comunicacin podr ser en dos sentidos: - Desde la ventana principal a la secundaria. - Desde la ventana secundaria a la principal. Si queremos comunicar desde la ventana principal hacia la secundaria necesitamos disponer de una referencia de dicha ventana secundaria o popup. La referencia la ser el nombre que le pongamos a la ventana secundaria. A continuacin en este artculo veremos cmo asignar un nombre a un popup. Si la comunicacin es desde la ventana secundaria a la principal debemos utilizar el atributo opener de dicha ventana secundaria, que referencia a la ventana principal. Tanbin veremos ms adelante este tipo de comunicacin. Nombre de la ventana con Javascript Cuando abrimos una ventana utilizando el mtodo open del objeto window asignamos un nombre a la ventana para referirnos a ella utilizando HTML. Pero si queremos referirnos a ella utilizando Javascript necesitaremos utilizar otro nombre. La referencia Javascript a la ventana que se acaba de abrir se obtiene gracias al valor de retorno del mtodo open. Para guardar la referencia asignamos el valor de retorno del mtodo a una variable. A partir de ese momento la variable ser un sinnimo del objeto window, es decir, ser como si fuera el objeto window del popup y por lo tanto podremos acceder a los mtodos y propiedades de la ventana secundaria a partir de esa variable.

referenciaVentana = window.open(mi_url.html,nombre,width=100,height=300) Luego podremos acceder a los mtodos y propiedades de esta manera. referenciaVentana.close() referenciaVentana.document.bgColor = red V. Ejemplo de acceso a un popup Veamos cmo acceder desde la ventana principal hacia una ventana secundaria para trabajar con sus propiedades y mtodos. Vamos a hacer un ejemplo de acceso a una propiedad del objeto window de la ventana secundaria. Se trata de la propiedad location del objeto window, que no hemos visto todava en ejemplos. Recordemos que esta propiedad contiene el URL del documento que estamos viendo y que si la cambiamos cambia la pgina que se est viendo. Nuestro ejemplo consiste en una pgina que va a abrir la ventana secundaria. Adems la pgina tendr un formulario con un campo de texto y un botn. En el campo de texto podremos colocar URLs y al pulsar el botn haremos que en el popup se muestre la URL que se haya escrito. Al abrir la ventana guardamos la referencia en la variable miPopup. var miPopup miPopup = window.open("about:blank","miventana","width=600,height=400,menubar=no") Si nos fijamos veremos que el URL de inicio de la ventana es about:blank, esto quiere decir que la ventana secundaria se inicializar con un documento en blanco. (Si escribimos about:blank en la barra de direcciones de un navegador veremos que la pgina se pone en blanco) Ahora vemos el formulario que contiene el campo de texto y el botn. <form name=formul> <input type=text name=url size=30 value="http://"> <input type=button value="Mostrar URL en popup" onclick="muestraURL()"> </form> No tiene nada que destacar, de modo que pasamos a ver la funcin que se encarga de actualizar la URL de la ventana secundaria. function muestraURL(){ miPopup.location = document.formul.url.value }

La funcin es extremadamente simple. Slo se accede a la propiedad location de la variable que guarda la referencia Javascript y se actualiza con lo que haya escrito en el campo de texto. La propiedad location de la variable es como la propiedad location de la ventana secundaria. Hay un detalle poco agradable en este ejemplo. Se trata de que al trabajar sobre el formulario de la pgina que abrimos en primer lugar y luego actualizar el contenido del popup, se queda en segundo plano el popup con el contenido actualizado, tapado por la primera ventana. Esto es porque el foco de la aplicacin lo tiene la ventana original, y por eso es la ventana que se ve delante. Sera interesante que al actualizar el contenido del popup se mostrase delante la ventana del popup actualizada. Esto se consigue utilizando el mtodo focus() del objeto window, que coloca el foco de la aplicacin en la ventana sobre la que lo invoquemos. La funcin con esta pequea modificacin quedar as. function muestraURL(){ miPopup.location = document.formul.url.value miPopup.focus() } Slo hemos aadido la llamada al mtodo focus() del objeto window correspondiente al popup. Los resultados los podemos ver acontinuacion:

VI.

Acceso desde el popup a la ventana principal Aprendemos a acceder a las propiedades de una pgina desde una ventana secundaria que ha sido abierta en esa pgina, es decir, acceso desde el popup a la ventana principal que lo abri. Tambin podemos acceder desde un popup a la ventana que lo abri, para acceder a los mtodos y propiedades de la ventana, o hacer lo que deseemos con Javascript. Para ello, en el popup hay una variable declarada que es opener. En realidad es una propiedad del objeto window del popup, que hace referencia al objeto window de la ventana "abridora" (opener). Para ilustrar el funcionamiento de opener vamos a hacer un ejemplo que consiste en una pgina principal, que tiene un formulario donde, entre otros campos, debemos introducir un telfono con su prefijo internacional. En caso de que no conozcamos los prefijos internacionales nos permite pulsar sobre un botn y mostrar una ayuda. La ayuda se ofrece a travs de un popup que contiene la lista de los prefijos internacionales para que seleccionemos uno de ellos. En el momento que se selecciona se debe actualizar el formulario de la ventana padre y cerrar la ventana secundaria. Vamos por partes. Lo primero que podemos ver es el ejemplo en funcionamiento para aclarar posibles dudas.

Ahora vamos a echar un vistazo a la pgina principal, que contiene el formulario donde se debe escribir el prefijo y el nmero. Al lado del campo de texto donde se coloca el prefijo hemos puesto un botn que sirve para mostrar el popup de ayuda. Al pulsar el botn

llamamos a la funcin abreVentana() que ser la encargada de abrir el popup con la lista de prefijos. <html> <head> <title>Formulario prefijos</title> <script> var miPopup function abreVentana(){ miPopup = window.open("prefijos.html","miwin","width=300,height=150,scrollbars=yes") miPopup.focus() } </script> </head> <body> <form name=formul> <table cellspacing="3" cellpadding="3" border="0"> <tr> <td align="center">Prefijo</td> <td align="center">Nmero</td> </tr> <tr> <td align="center"> <input type=text name=prefijo value="+" size=3 maxlength=3> <input type="Button" value="?" onclick="abreVentana()"> </td> <td align="center"> <input type=text name=numero value="" size=10 maxlength=10> </td> </tr> </table> </form> </body> </html> La funcin abreVentana se tiene que entender perfectamente, ya que hemos hecho anteriormente una funcin similar. El resto de la pgina es un simple formulario HTML metido dentro de una tabla para que quede mejor maquetado.

Ahora veamos la pgina HTML del popup, que es la que utiliza la referencia opener a la ventana "abridora", para actualizar el campo del formulario donde hay que colocar el prefijo. <html> <head> <title>Prefijos internacionales</title> <script> function ponPrefijo(pref){ opener.document.formul.prefijo.value = pref window.close() } </script> </head> <body> <h1>Lista de prefijos internacionales</h1> <form name=fprefijos> Espaa: <input type="Button" value="+34" onclick="ponPrefijo('+34')"> <br> Holanda: <input type="Button" value="+31" onclick="ponPrefijo('+31')"> <br> Gran Bretaa: <input type="Button" value="+44" onclick="ponPrefijo('+44')"> <br> Estados Unidos: <input type="Button" value="+01" onclick="ponPrefijo('+01')"> <br> Blgica: <input type="Button" value="+32" onclick="ponPrefijo('+32')"> <br> Grecia: <input type="Button" value="+30" onclick="ponPrefijo('+30')"> </form> </body> </html> Tenemos un formulario con una serie de botones para seleccionar el prefijo. Todos llaman a la funcin ponPrefijo() pasndole el prefijo seleccionado.

La funcin ponPrefijo() debe poner en un campo del formulario de la ventana que abri el popup el valor del prefijo que ha recibido por parmetro. Para ello accede a la propiedad opener del objeto window, para tener acceso a la ventana principal (abridora) y desde all accede a su documento, al formulario y a la propiedad value del campo de texto donde hay que escribir el prefijo. Por ltimo cierra el popup con el mtodo close() del objeto window. Esperamos que haya resultado fcil de entender y sirva para ilustrar el modo de acceso desde el popup a la ventana padre. Recordar que podis ver en marcha el ejemplo en una pgina aparte. VII. Acceso a variables y funciones de otras ventanas Cmo tener acceso a variables y funciones que estn en otra ventana. Desde una ventana tambin tenemos acceso a las variables y funciones que hayamos declarado en otras ventanas. Gracias a esto, desde un popup podemos controlar el estado de las variables de la pgina principal y llamar a funciones para hacer cualquier cosa que necesitemos. El acceso a las variables y las funciones se realiza a travs de los objetos ventana. Por ejemplo, si deseamos desde una ventana tener acceso a una funcin de un popup colocaramos su objeto ventana seguido de un punto y el nombre de la funcin a la que queramos acceder, como si fuese un mtodo nuevo del objeto ventana. Las variables se acceden como si fueran propiedades del objeto ventana. El cdigo sera algo parecido a esto. Para acceder a una variable miPopup.miVariable Para acceder a una funcin miPopup.miFuncin() Vamos a ver un ejemplo para ilustrarlo. Tenemos una pgina con un nmero cualquiera de campos de texto en un formulario y una funcin que sirve para inicializar los datos de los campos de texto a 0. En esta pgina abriremos una ventana secundaria desde la cual invocaremos a la funcin que inicializa los campos de texto. El ejemplo puede verse.

La pgina principal tendr una parte con un script para definir la funcin y abrir el popup y otra parte con el formulario que contiene los campos de texto. Se puede ver a continuacin su cdigo. <html> <head> <title>Inicializador de formularios</title> <script> function inicializaCampos(){ for (i=0;i<document.forms[0].elements.length;i++) document.forms[0].elements[i].value = "0" } var miPopup miPopup = window.open("llamadas-desde-ventanas-popup.html","miventana","width=308,heig ht=70,menubar=no") </script> </head> <body> <form> <input type="Text" name="t1" value="0" size="4" maxlength="100"> <input type="Text" name="t2" value="0" size="4" maxlength="100"> <input type="Text" name="t3" value="0" size="4" maxlength="100"> <input type="Text" name="t4" value="0" size="4" maxlength="100"> <input type="Text" name="t5" value="0" size="4" maxlength="100"> <input type="Text" name="t6" value="0" size="4" maxlength="100"> <input type="Text" name="t7" value="0" size="4" maxlength="100"> </form> </body> </html>

En el popup podremos encontrar el cdigo necesario para invocar a la funcin inicializaCampos() que pertenece a la ventana principal. La llamada a la funcin de la ventana "abridora" se realiza al pulsar un botn. <html> <head> <title>Popup Inicializador de formularios</title> <script> function llamadaOtraVentana(){ //llamada a la funcin de ventana abridora window.opener.inicializaCampos() window.opener.focus() } </script> </head> <body> <form> <input type="button" value="Llamar a funcin de otra ventana" onclick="llamadaOtraVentana()"> </form> </body> </html> VIII. Cerrar ventanas con Javascript Explicamos con detalle el proceso para cerrar ventanas del navegador mediante la programacin Javascript. Para cerrar la ventana del navegador debemos utilizar el mtodo close() del objeto window de la vetana que deseamos cerrar. Es muy sencillo, aun as, vamos a ver un ejemplo sobre cerrar ventanas. El ejemplo consta de una pgina que tiene un botn que abre una ventana secundaria o popup. Adems, tendr otro botn que cerrar la ventana secundaria. Por su parte, la ventana secundaria tendr un botn que permitir cerrarse a ella misma. Luego de tratar este ejemplo comentaremos el caso especial de cerrar la ventana principal desde el popup y las pegas que tiene. Veamos el ejemplo en marcha y as comentaremos con ms facilidad los cdigos.

Si damos clic en el botn Abrir ventana secundaria

Podemos cerrar la ventana secundaria haciendo clic en el botn de la pgina Cerrar ventana secundaria o haciendo clic en el botn Cerrar de la ventana Secundaria. La pgina principal tendra esta forma: <html> <head> <title>Ventana Principal</title> <script> //creamos la variable ventana_secundaria que contendr una referencia al popup que vamos a abrir //la creamos como variable global para poder acceder a ella desde las distintas funciones var ventana_secundaria function abrirVentana(){ //guardo la referencia de la ventana para poder utilizarla luego ventana_secundaria = window.open("cerrar_window2.html","miventana","width=300,height=200,menubar=no" ) } function cerrarVentana(){ //la referencia de la ventana es el objeto window del popup. Lo utilizo para acceder al mtodo close ventana_secundaria.close() } </script> </head> <body> Esta es la ventana principal <form> <input type=button value="Abrir ventana secundaria" onclick="abrirVentana()"> <br> <br> <input type=button value="Cerrar ventana secundaria" onclick="cerrarVentana()">

</form> </body> </html> Contiene un script en la cabecera de la pgina con las funciones para abrir y cerrar la ventana. Adems, como ya se indic anteriormente en este manual, se debe guardar una referencia a la ventana que se acaba de abrir para poder realizar acciones sobre ella posteriormente, en este caso cerrarla. Como la referencia de la ventana se crea en la funcin abrirVentana() y luego se utilizar en la funcin cerrarVentana(), dicha referencia deber declararse como global o de lo contrario slo tendra validez mientras la funcin abrirVentana() estuviera ejecutndose y, cuando pretendisemos utilizarla en la funcin cerrarVentana(), nos dira que esa referencia ya no existe. As que disponemos de una referencia global a la ventana que va a abrirse y dos funciones que abren el popup guardando la referencia y cerrar el popup utilizando la referencia de la ventana a cerrar. Estas dos funciones se llaman desde dos botones de la pgina, que hemos colocado dentro de un formulario.
Nota: Hay que sealar que puede haber un error javascript si se pretende cerrar la ventana antes de abrirla. Para evitarlo podemos controlar que realmente la ventana est abierta antes de ejecutar el mtodo close() de su objeto window, pero esa es una prctica que veremos en ejercicios ms adelante.

Por su parte, el popup tiene un cdigo como el siguiente. <html> <head> <title>Ventana Secundaria</title> <script> function cerrarse(){ window.close() } </script> </head> <body> Esta es la ventana del popup <form> <input type=button value="Cerrar" onclick="cerrarse()"> </form>

</body> </html> Contiene tan solo una funcin para cerrarse ella misma, que lo nico que hace es ejecutar el mtodo close() sobre su propio objeto window. Tambin hemos colocado un botn que se ha configurado para llamar a la funcin que cierra la ventana cuando se le haga clic. Un detalle sobre cerrar ventanas En cualquier momento podemos cerrar una ventana secundaria utilizando el mtodo close() del objeto window. En el ejemplo anterior hemos visto cmo se cierran ventanas y es muy sencillo. En cualquier momento podemos cerrar una ventana, pero si intentamos cerrar una ventana que no se ha abierto con Javascript (sin utilizar window.open()) nos saldr una caja de confirmacin que pregunta al usuario si de verdad quiere cerrar la ventana.
Nota: La caja de confirmacin que hemos podido ver aparece como elemento de seguridad, para evitar que un programador malicioso intente cerrar una ventana que hemos abierto nosotros como usuarios y que, en teora, no tiene permiso para cerrar. As que a partir de determinado navegador decidieron preguntar al usuario si realmente desea que se cierre esa ventana. De todos modos, las cosas pueden variar de unos casos a otros, ya que en Netscape 7 ya no preguntan si se desea de verdad cerrar la ventana. Por su parte, si en Internet Explorer 6 la ventana se abri con un enlace HTML con el atributo target="_blank" tampoco aparece la ventana de la que estamos hablando.

Es slo un detalle que no tiene mucha importancia, pero para las personas que nunca han experimentado con el trabajo con ventanas secundarias en Javascript, resultar sorprendente que el navegador haga esa pregunta, que probablemente nunca hayamos visto. Una cosa ms, slo ocurre esto en navegadores modernos, aunque actualmente le va a pasar a casi todos los usuarios. IX. Submen en otra ventana Hacemos un submen de opciones que se muestra en una ventana secundaria y ona vez seleccionada la opcin del submen se traspasa a la ventana padre. Vamos a realizar un pequeo ejemplo sobre cmo 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, ms concretamente, el mtodo 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 caractersticas con las que las podemos abrir. En este ejemplo vamos a ir un poco ms 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 pgina con fondo blanco, un campo de texto vaco y un botn. Cuando se pulse el botn 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 pgina padre cambiar a ese color y el color se escribir en el campo de texto.

Pgina padre La pgina original contendr un simple formulario con un botn y un campo de texto. Adems, 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=Y ES") } </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 funcin lanzarSubmenu() es la que contiene el script para abrir el popup. Para ello utiliza el mtodo open() del objeto window, cuyo uso se describi en el artculo de Abrir ventanas secundarias. El formulario es de lo ms normal. Lo nico destacable es el atributo onclick del botn, que sirve para definir las acciones a ejecutar cuando se pulsa el botn, en este caso una llamada a la funcin que abre la ventana secundaria. Pgina secundaria La pgina secundaria es un poco ms compleja, pero la parte que nos importa a nosotros en este ejercicio es muy sencilla. Lo importante de la pgina 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 pginas 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 sinnimo 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 funcin actualizaPadre() es la encargada de realizar el trabajo. Recibe el cdigo del color sobre el que se ha pulsado. En la primera lnea cambiamos el color de la pgina web padre y en la segunda lnea colocamos el cdigo RGB del color recibido por parmetro en el campo de texto. Como vemos, el objeto opener tambin depende del objeto window de la pgina, como todos los dems objetos de la jerarqua Javascript. El resto de la pgina es parecido se puede ver a continuacin. <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 complicacin de este script y dado que no vamos a explicarlo todo otra vez. 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 funcin actualizaPadre() pasndole el cdigo del color se ha de utilizar. X. Popups DHTML OpenPopups Sistema Javascript para crear popups DHTML, por medio de capas, que no se pueden bloquear por los sistemas de bloqueo de popups.

Todos sabemos ya que la mayora de los navegadores disponen de sistemas para bloquear los molestos popups, y cuando estos no los bloquean, existen barras de navegacin, como la de Google, que tambin bloquea la presentacin de popups. La mayora de las veces, estos popups son muy molestos y tenemos que celebrar que ahora la mayora se puedan detectar y no permitir su apertura, pero muchos de nuestros sitios utilizan este sistema para mostrar informacin legtima que nuestros visitantes deberan conocer. En cualquier caso, existen mtodos para mostrar popups que pueden resultar ms complicados de bloquear, como los popups DHTML, que son una emulacin de las ventanas secundarias, pero que funciona por capas y HTML dinmico para mostrar u ocultar su contenido. Este tipo de popups no se tienen en cuenta como ventanas secundarias, por lo que no se bloquean. Tan slo los navegadores que tengan deshabilitado Javascript dejarn de mostrar estos popups. Recordemos que Internet Explorer, depende de cmo est configurado, a veces te muestra un mensaje de alerta cuando se intenta ejecutar un script en Javascript. El usuario es el responsable de permitir, o no, ejecutar scripts en la pgina. Por eso no es tan raro que incluso los popups DHTML se puedan bloquear, pero por lo menos significan un avance con respecto a las ventanas secundarias habituales. OpenPopups Todo lo anterior sirva para presentar un script Javascript Open Source (gratuito y de cdigo libre) para crear Popups DHTML. Merece la pena conocer este script, porque seguro puede resultar muy interesante para nuestras pginas web. Referencia: En DesarrolloWeb.com hemos publicado algunos otros artculos sobre cmo hacer un popup DHTML, pero utilizando la librera Cross-Browser. Pueden ser de interesante lectura para quien quiera profundizar en el tema o encontrar otras posibilidades para realizar popups DHTML. Est en nuestro manual deTaller de CrossBrowser DHTML. Se tienen que descomprimir los archivos que se descargan desde la web, manteniendo la misma estructura de directorios. Una vez estn descomprimidos, en un directorio dentro de nuestro sitio web, que llamaremos por ejemplo "d_openpopups", ya podemos accederlos desde cualquier pgina para mostrar popups DHTML. Para ello, lo primero es incluir el Javascript con la librera. <script language="JavaScript" src="/d_openpopups/openpopups/openpopups.js"></script> type="text/javascript"

Donde "d_openpopups" debe ser el directorio donde hemos descomprimido los archivos. Tal como est escrita la ruta hacia el script, se supone que hemos puesto este directorio en la raz del directorio de publicacin de la web.

Luego, tenemos que aadir un evento onload en la etiqueta <body>, para ocultar los popups al cargar la pgina. <body onload="hideDiv()"> La funcin hideDiv() recibe el nmero de popups que vamos a utilizar en la pgina. Si tenemos un solo popup DHTML llamaremos pasando un 1 como parmetro: hideDiv(1). Si tenemos 5 popups DHTML, le pasaremos un 5 como parmetro: hideDiv(5). A continuacin, tenemos que crear las capas con el cdigo fuente de los popups a mostrar. Algo como: <div id="Div1"> Cdigo del Popup </div> Hay que fijarse que la capa tiene como identificador (atributo id) "Div1". Eso es para el popup 1. Si tuviramos otros popups, deberamos darles nombres con nmeros consecutivos: Div2, Div3 Para acabar, tenemos que hacer la llamada a la funcin Javascript que debe mostrar el popup. Esa funcin se llama createWindow() y recibe varios parmetros: 1. 2. 3. 4. 5. Ttulo de la ventana Ancho de la ventana (el alto ser el necesario para que quepa todo el contenido) Color de fondo de la ventana El identificador de la capa (slo el numero, 1, 2, 3) Si queremso que se muestre el icono para minimizar (1 para mostrarlo y 0 si no queremos que se muestre) 6. La posicin "left" de la ventana (el nmero de pseles a la izquierda de la ventana) 7. La posicin "top" de la ventana (el nmero de pixels que debe haber arriba de la ventana. Por ejemplo, una llamada posible a esta funcin sera: createWindow('Ttulo', 300, '#ffff88', 1, 0, 100, 25); Un detalle que a nosotros nos ha hecho falta cambiar para que todo funcionase correctamente, aunque no he visto explicado nada de esto en la documentacin del producto, son los directorios de las imgenes y las declaraciones de estilos que utilizan los popups DHTML. Esos directorios vienen especificados en el archivo de scripts javascript llamado openpopups.js. En las siguientes lneas del cdigo se especifican los directorios de las imgenes y los CSS:

// CSS Diretory cssDir = "/d_styles/"; // Images Directory imageDir = "images/"; En principio, segn entiendo, no habra por qu tocar esas lneas, porque no he modificado la estructura de directorios del archivo de descarga, pero si no las toco los ejemplos no funcionan correctamente. Para que las rutas se encuentren, he tenido que colocar la estructura de directorios desde la raz del dominio hasta las carpetas donde estn los archivos CSS y las imgenes. Sera algo como esto: // CSS Diretory cssDir = "/d_openpopups/openpopups/styles/"; // Images Directory imageDir = "/d_openpopups/openpopups/images/"; Cdigo completo Vamos a mostrar el cdigo de una pgina que tiene dos popups DHTML y con un par de mtodos de carga de los popups, uno por medio de un botn y otro por medio de un enlace. <html> <head> <title>Ejemplo OpenPopups</title> <script language="JavaScript" type="text/javascript" src="/d_openpopups/openpopups/openpopups.js"> </script> </head> <body onLoad="hideDiv(2);"> Esta pgina muestra un par de popups DHTML. <br> <br> Esperamos que sean interesantes. <form> <input type="button" value="Abrir Popup DHTML 1" onClick="createWindow('Ejemplo 1', 150, '#ffff88', 1, 1, 20, 40);"> </form> <p> Ahora veamos el ejemplo 2, apertura con un enlace:

<a href="#" onClick="createWindow('Anuncio MercadoProfesional.com', 468, '#EEEEEE', 2, 0, 240, 165);">Abre el segundo popup</a> <div id="Div1"> <div style="border: 1px solid #ff8800; background-color: #FFFF88; padding: 5px;"> <b>Aqu pondramos colocar tanto texto como queramos! Y todo tipo de contenido HTML! </div> <ul> <li>Con listas</li> <li>Enlaces</li> <li>Tablas</li> <li>...</li> </ul> </div> <div id="Div2"> <div align="center"><a target="_blank"><img src="mp468.gif" alt="MercadoProfesional.com"></a></div> </div> </body> </html> Se puede ver el ejemplo en marcha a continuacin.

href="http://www.mercadoprofesional.com" width="468" height="60" border="0"

Si hacemos clic en el botn Abrir Popup DHTML 1

Ahora si hacemos clic en el enlace Abre el segundo popup

XI.

Efecto para inhabilitar/habilitar el fondo de la Pgina En este artculo se explica como crear un efecto para hacer que se muestre una ventana emergente y que el fondo de la pgina quede desactivado. Bueno, no es una ventana emergente como tal, es ms bien un simulacro pero que hace las veces de ventana emergente y sin peligro de que el navegador te bloquee dicha ventana. Es necesario tener conocimientos (por lo menos bsicos) de: HTML - pueden ver la seccin de HTML de DesarrolloWeb CSS - pueden ver la seccin de CSS de DesarrolloWeb JavaScript - pueden ver la seccin de JavaScript de DesarrolloWeb Para el ejemplo de este artculo se va a utilizar imgenes transparentes con distintos niveles de opacidad, por lo cual es necesario que sepas utilizar un editor de imgenes (photoshop, firework, ...) para crear las imgenes transparentes a tu gusto. En caso de que no tengas un editor de imgenes, puedes utilizar las del ejemplo sin ningn problema. Explicacin del Ejemplo: Por fin!! La parte buena de este artculo.

A muy grosso modo, el cuerpo principal (body) del archivo Html del ejemplo, est compuesto por 3 prrafos los cuales tienen la finalidad de llenar la pgina, logrando as que se vea cargada de informacin. Al final de cada prrafo hay un enlace el cual es el encargado de mostrar la ventana emergente a travs de cdigo hecho en JavaScript . Esta es la nica diferencia significativa entre los 3 prrafos (el llamado a la funcin JavaScript). El cdigo del primer prrafo es el siguiente: <p> Este es el contenido del primer prrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br> Este es el contenido del primer prrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br> Este es el contenido del primer prrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br> Este es el contenido del primer prrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br> <a href="javascript:abrirVentana('1');">Simulacro de ventana Emergente 1</a> <p> Una vez que hayas visto los 3 prrafos en el cdigo del ejemplo, lo que vers a continuacin son 4 capas (div) llamadas capaVentana, capaFondo1, capaFondo2 y capaFondo3. A estas capas le he aplicado cdigo CSS y en principio todas estn ocultas. La capa capaVentana es la ms compleja de todas y es porque en ella est el cdigo de lo que he llamado "ventana emergente". El cdigo es ms sencillo de lo que parece: Us una tabla principal para maquetar una "ventanita de informacin" exacta a las del sistema operativo Windows XP, en donde a cada celda le asign una imagen, y en la celda central, hice otra tabla donde coloqu el mensaje de la ventanita y el botn de Aceptar. Las otras capas no tienen absolutamente nada. Ms adelante veremos por qu. Con esto finalizo lo que sera la explicacin del cuerpo del Html. Antes de explicar los cdigos que hice en JavaScript, es importante conocer la arquitectura de la pgina, es decir, la forma en que diagram la pgina para lograr el efecto deseado:

Usando CSS se puede dar un nivel de profundidad a las capas. Esto es lo que he hecho!!! He aplicado el atributo z-index para colocar capas encima de otras. La capa que tenga un mayor valor numrico para el atributo z-index, es la que se ver ms por encima de todas y las dems quedarn por debajo de acuerdo al atributo z-index. Para el ejemplo de este artculo, el cuerpo principal de la pgina tiene un z-index = 1, mientras que las capas llamadas capaFondo1, capaFondo2 y capaFondo3 les he asignado un valor de 2. A la capa capaVentana le he asignado 3 porque es la que quiero que quede por encima de todas las dems. Como dije anteriormente, todas las capas inicialmente estn oculta (se utiliza el atributo visibility con el valor hidden) y la idea es aplicar JavaScript para mostrar dichas capas. En las 3 capas centrales (capaFondo1, ...ondo3), es donde radica el truco de que el cuerpo principal de la ventana quede desactivado cuando se muestre la ventana emergente. Utilizando CSS hago que estas capas tengan el mximo ancho (width) que puedan tener y un largo (heigth) que he puesto a mi conveniencia, de modo que cubren todo el cuerpo principal. Las capas centrales se diferencian por las imgenes que en ellas se muestran. Todas tienen imgenes transparente con opacidades de 40%, 50% y 60% y diferentes filtros de transparencia. Al usar imgenes con tendencia (opacidad) al transparente sobre el fondo de la capa, la capa permite que se vea lo que hay por debajo de ella, en este caso, el cuerpo principal de la pgina. Es importante destacar, que si colocan una imagen 100% transparente ser equivalente a no colocar imagen, y el fondo se ver normal. La idea es colocar una imagen que no sea totalmente transparente, de modo que se vea el color de la imagen y lograr as que el fondo parezca inactivo. Hay 2 funciones JavaScript, las cuales muestran y ocultan las capas. El cdigo de la funcin que muestra las capas es el siguiente: function abrirVentana(ventana) { if (ventana=="1") { document.getElementById("capaFondo1").style.visibility="visible"; document.getElementById("capaFondo2").style.visibility="hidden"; document.getElementById("capaFondo3").style.visibility="hidden"; } else if (ventana=="2") { document.getElementById("capaFondo1").style.visibility="hidden"; document.getElementById("capaFondo2").style.visibility="visible"; document.getElementById("capaFondo3").style.visibility="hidden"; } else { document.getElementById("capaFondo1").style.visibility="hidden";

document.getElementById("capaFondo2").style.visibility="hidden"; document.getElementById("capaFondo3").style.visibility="visible"; } document.getElementById("capaVentana").style.visibility="visible"; document.formulario.bAceptar.focus(); } Esta es la funcin que se ejecuta cada vez que se hace clic en cualquiera de los 3 enlaces. Al hacer clic en el enlace ubicado en el 1er prrafo, ste hace un llamado a la funcin y le pasa como parmetro el nmero uno (1), el cual indica el nmero del prrafo. Al hacer clic en los otros dos enlaces, se pasar como parmetro 2 y 3 de acuerdo al prrafo. Dentro de la funcin se obtiene los estilos de cada capa y se utiliza la propiedad visibility para mostrar u ocultar segn sea el caso. Dentro de esta funcin se le da el foco al botn Aceptar. Una vez que se muestra la ventanita emergente, esta se puede quitar (ocultar) presionando sobre el botn Aceptar o sobre la X. Esto har un llamado a la funcin JavaScript respectiva: function cerrarVentana() { document.getElementById("capaFondo1").style.visibility="hidden"; document.getElementById("capaFondo2").style.visibility="hidden"; document.getElementById("capaFondo3").style.visibility="hidden"; document.getElementById("capaVentana").style.visibility="hidden"; document.formulario.bAceptar.blur(); } Esta funcin se explica por s misma. Oculta todas las capas y le quita el foco al botn Aceptar de la ventanita. Con esto finalizo la explicacin del artculo. Espero le sirva y puedan aplicarlo en sus creaciones.

Si hacemos clic en el enlace Simulacro de ventana Emergente 1

Si hacemos clic en el enlace Simulacro de ventana Emergente 2

Si hacemos clic en el enlace Simulacro de ventana Emergente 3