You are on page 1of 28

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

secundarias, también llamadas popups. Aprendemos a abrirlas, cerrarlas, pasar datos desde unas ventanas a otras, etc. I. Control de ventanas secundarias en Javascript Prólogo del manual sobre el tratamiento y control de ventanas secundarias, o popups, en Javascript. Una de las utilidades más interesantes de Javascript es el control de ventanas secundarias (popups en inglés). Las ventanas secundarias son las que se abren adicionalmente a la ventana principal del navegador. Suelen ser más pequeñas que las ventanas normales y generalmente no tienen los menús del navegador, barra de direcciones, etc. Con Javascript podemos controlar los popups para hacer cosas como abrirlos, cerrarlos, darles el foco, pasar información de una ventana a otra, etc. En este manual veremos cómo 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. Comunicación 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 descripción de la forma de abrir ventanas secundarias con el lenguaje Javascript. Para ello utilizamos el método open del objeto window, que es el encargado de abrir la ventana. La sintaxis del método es la siguiente. window.open(URL,nombre_ventana,parametros_configuración) El primer parámentro es la URL de la página que deseamos mostrar en la ventana secundaria. El segundo parámetro 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 parámetro es la configuración de la ventana, para indicar el tamaño, qué barras de menús se tienen que ver y cuáles no, si tiene o no barras de desplazamiento, etc. A continuación podemos ver un ejemplo de utilización del método open. window.open("pagina.html","miventana","width=300,height=200,menubar=no")

II.

III.

Apertura y configuración de popups con javascript Este artículo te enseñará 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 información específica. Algunas ventajas de abrir un enlace en una ventana secundaria pueden ser que: El usuario no se marcha de la página donde estaba el enlace. La ventana secundaria se puede configurar libremente con lo que se pueden hacer ventanas más grandes o pequeñas y con más o menos menús. 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 fácilmente con tan solo HTML. Para ello podemos utilizar el atributo TARGET de las etiquetas HREF. Si ponemos target="_blank" en el enlace, la página se abrirá en una ventana secundaria. También podemos poner target="xxx" para que el enlace presente la ventana llamada xxx o en el frame xxx. El enlace tendría que tener esta forma: <a href="mipagina.html" target="_blank"> El problema de abrir una página secundaria con HTML consiste en que no podemos definir la forma de ésta ni podremos ejercer mayor control sobre élla, tal como comentábamos entre las ventajas de abrir una ventana secundária 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 cómo abrir una ventana secundaria utilizando Javascript. 1. Sentencia Javascript para abrir una ventana La sentencia es simplemente la función window.open(), lo más complicado es saber cómo utilizar esa función, pero ahora veremos que no reviste ninguna complicación. La función window.open() recibe tres parámetros, que se colocan dentro de los paréntesis, de este modo: window.open(URL,nombre_de_la_ventana,forma_de_la_ventana) Veamos rápidamente cada uno de estos parámetros por separado.

com en una ventana secundaria a la que vamos a llamar ventana1. <a href="javascript:ventanaSecundaria('http://www."width=120. Además.desarrolloweb. Por ejemplo se puede definir su altura. Función que abre una ventana Lo más cómodo para abrir una ventana es colocar una función Javascript que se encarge de las tareas de abrirla y que reciba por parámetro la URL que se desea abrir. por ejemplo http://www.desarrolloweb.com')"> Pincha en este enlace para abrir la ventana secundaria</a> . sino a la sentencia Javascript necesaria para abrir la ventana secundaria. Colocamos un enlace Este enlace no debe estar dirigido directamente a la página que queramos abrir.open("http://www. veámoslo a continuación: <script language=javascript> function ventanaSecundaria (URL){ window.scrollbars=NO") Esto quiere decir que abra la página inicial de desarrolloweb. etc Veamos un ejemplo de sentencia Javascript completa para abrir una ventana secundaria: window. El enlace llama a la función que abre la ventana Ahora Veamos cómo quedaría todo ese enlace en la página. 300 de alto y no tendrá barras de desplazamiento. si después de abrir esa ventana colocamos otro enlace en la página que abría la ventana cuyo atributo target está dirigido hacia el nombre_de_la_ventana (en este caso ventana1). Una aclaración adicional. si tiene barras de desplazamiento. El script es sencillo.com" . "width=120."ventana1".URL: representa el URL que deseamos abrir en la ventana secundaria. Para ejecutar una sentencia Javascript con la pulsación de un enlace lo hacemos así: <a href="javascript:sentencia_javascript_para_abrir_la_ventana"> 4. "ventana1" .desarrolloweb.open(URL. anchura. 2.height=300.height=300.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.scrollbars=NO") } </script> 3. la ventana será de 120 pixels de ancho. este enlace se mostrará en la ventana secundaria.

y dentro de comillas dobles siempre se han de utilizar comillas simples a no ser que deseemos cerrar las comillas dobles. A partir de aquí se enumeran otra serie de propiedades que sirven para mostrar o no un elemento de la barra de navegación que tienen los navegadores más populares. En este caso. Cuando ponemos atributo=NO lo que hacemos es evitar que ese elemento se vea. sin necesidad de que el usuario pulse sobre ningún enlace. Indica la posición de la ventana.Hay que fijarse que las comillas simples que se colocan para definir el URL que se pasa como parámetro de la función ventanaSecundaria(). es decir. Parámetros para dar forma a una ventana Estos atributos los puedes utilizar en la función window.open() para definir la forma que deseas que tenga tu ventana secundaria. En concreto es la distancia en pixels que existe entre el borde superior de la pantalla y el borde superior de la ventana. Con resizable=YES se puede modificar el tamaño y con resizable=NO se consigue un tamaño fijo. como podría ser la barra de menús o la barra de estado. Scrollbars=YES hace que salgan (siempre en ie y solo si son necesarias en NTS). Width Height Ajusta el ancho de la ventana. En pixels Ajusta el alto de la ventana Indica la posición de la ventana. Top Left Scrollbars Resizable Directories (barra directorios) Location (barra direcciones) Menubar (barra de menús) Status (barra de estado) Titlebar (la barra del título) Toolbar (barra de herramientas) Abrir una ventana sin un enlace En otras ocasiones desearemos abrir una ventana secundaria automáticamente. Para definir de forma exacta si salen o no las barras de desplazamiento. Esta línea a añadir . Cuando ponemos el atributo=YES estamos forzando a que ese elemento se vea. Establece si se puede o no modificar el tamaño de la ventana. Son comillas simples porque el href del enlace ya tiene unas comillas dobles. scrollbars=NO hace que nunca salgan. el código de la función ventanaSecundaria nos sirve también y habrá que añadir una línea de código Javascript a continuación de la función ventanaSecundaria. En concreto es la distancia en pixels que existe entre el borde izquierdo de la pantalla y el borde izquierdo de la ventana.

Tanbién veremos más adelante este tipo de comunicación.Desde la ventana principal a la secundaria. La referencia Javascript a la ventana que se acaba de abrir se obtiene gracias al valor de retorno del método open. Si la comunicación es desde la ventana secundaria a la principal debemos utilizar el atributo opener de dicha ventana secundaria.open(URL. </script> Queda en negrita lo que sería la llamada a la función que abre la ventana secundaria. Pero si queremos referirnos a ella utilizando Javascript necesitaremos utilizar otro nombre. La referencia la será el nombre que le pongamos a la ventana secundaria. Para guardar la referencia asignamos el valor de retorno del método a una variable. .scrollbars=NO") } ventanaSecundaria("http://www. llamar a funciones y realizar comunicaciones en general para interactuar con las ventanas. Si queremos comunicar desde la ventana principal hacia la secundaria necesitamos disponer de una referencia de dicha ventana secundaria o popup."ventana1". es decir. A partir de ese momento la variable será un sinónimo del objeto window.desarrolloweb. Aprendemos también a asignar nombres a ventanas secundarias. . La comunicación podrá ser en dos sentidos: . Comunicación entre ventanas Podemos pasar datos de unas ventanas a otras. IV. como está fuera de una función se ejecuta según se está cargando la página. será como si fuera el objeto window del popup y por lo tanto podremos acceder a los métodos y propiedades de la ventana secundaria a partir de esa variable. Nombre de la ventana con Javascript Cuando abrimos una ventana utilizando el método open del objeto window asignamos un nombre a la ventana para referirnos a ella utilizando HTML. que referencia a la ventana principal.height=300. 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. A continuación en este artículo veremos cómo asignar un nombre a un popup."width=120.com").Desde la ventana secundaria a la principal.simplemente será una llamada a la función que se ejecutará según se está cargando la página. Veamos como quedaría este código: <script language=javascript> function ventanaSecundaria (URL){ window.

En el campo de texto podremos colocar URLs y al pulsar el botón haremos que en el popup se muestre la URL que se haya escrito.referenciaVentana = window.”width=100. Nuestro ejemplo consiste en una página que va a abrir la ventana secundaria. de modo que pasamos a ver la función que se encarga de actualizar la URL de la ventana secundaria.open(“mi_url.formul.value } . function muestraURL(){ miPopup.close() referenciaVentana. Se trata de la propiedad location del objeto window.”nombre”.bgColor = “red” V. var miPopup miPopup = window."miventana"."width=600.menubar=no") Si nos fijamos veremos que el URL de inicio de la ventana es about:blank.document.height=400. referenciaVentana. Recordemos que esta propiedad contiene el URL del documento que estamos viendo y que si la cambiamos cambia la página que se está viendo.url. que no hemos visto todavía en ejemplos. Ejemplo de acceso a un popup Veamos cómo acceder desde la ventana principal hacia una ventana secundaria para trabajar con sus propiedades y métodos. Al abrir la ventana guardamos la referencia en la variable miPopup. esto quiere decir que la ventana secundaria se inicializará con un documento en blanco.open("about:blank". Además la página tendrá un formulario con un campo de texto y un botón.location = document.html”. <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.height=300”) Luego podremos acceder a los métodos y propiedades de esta manera. Vamos a hacer un ejemplo de acceso a una propiedad del objeto window de la ventana secundaria. (Si escribimos about:blank en la barra de direcciones de un navegador veremos que la página se pone en blanco) Ahora vemos el formulario que contiene el campo de texto y el botón.

url. Sería interesante que al actualizar el contenido del popup se mostrase delante la ventana del popup actualizada. y por eso es la ventana que se ve delante. se queda en segundo plano el popup con el contenido actualizado. que coloca el foco de la aplicación en la ventana sobre la que lo invoquemos.value miPopup. La función con esta pequeña modificación quedará así.formul. Esto se consigue utilizando el método focus() del objeto window. La propiedad location de la variable es como la propiedad location de la ventana secundaria.location = document. Los resultados los podemos ver acontinuacion: .La función es extremadamente simple. tapado por la primera ventana. function muestraURL(){ miPopup. Sólo 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. Se trata de que al trabajar sobre el formulario de la página que abrimos en primer lugar y luego actualizar el contenido del popup. Hay un detalle poco agradable en este ejemplo. Esto es porque el foco de la aplicación lo tiene la ventana original.focus() } Sólo hemos añadido la llamada al método focus() del objeto window correspondiente al popup.

VI. acceso desde el popup a la ventana principal que lo abrió. debemos introducir un teléfono con su prefijo internacional. Ahora vamos a echar un vistazo a la página principal. Acceso desde el popup a la ventana principal Aprendemos a acceder a las propiedades de una página desde una ventana secundaria que ha sido abierta en esa página. que tiene un formulario donde. También podemos acceder desde un popup a la ventana que lo abrió. Para ilustrar el funcionamiento de opener vamos a hacer un ejemplo que consiste en una página principal. Lo primero que podemos ver es el ejemplo en funcionamiento para aclarar posibles dudas. entre otros campos. Al pulsar el botón . para acceder a los métodos y propiedades de la ventana. en el popup hay una variable declarada que es opener. Para ello. que contiene el formulario donde se debe escribir el prefijo y el número. En el momento que se selecciona se debe actualizar el formulario de la ventana padre y cerrar la ventana secundaria. o hacer lo que deseemos con Javascript. En caso de que no conozcamos los prefijos internacionales nos permite pulsar sobre un botón y mostrar una ayuda. es decir. En realidad es una propiedad del objeto window del popup. Vamos por partes. La ayuda se ofrece a través de un popup que contiene la lista de los prefijos internacionales para que seleccionemos uno de ellos. que hace referencia al objeto window de la ventana "abridora" (opener). Al lado del campo de texto donde se coloca el prefijo hemos puesto un botón que sirve para mostrar el popup de ayuda.

<html> <head> <title>Formulario prefijos</title> <script> var miPopup function abreVentana(){ miPopup = window. .html".scrollbars=yes") miPopup.open("prefijos."width=300.focus() } </script> </head> <body> <form name=formul> <table cellspacing="3" cellpadding="3" border="0"> <tr> <td align="center">Prefijo</td> <td align="center">Número</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 función abreVentana se tiene que entender perfectamente. ya que hemos hecho anteriormente una función similar.height=150."miwin". El resto de la página es un simple formulario HTML metido dentro de una tabla para que quede mejor maquetado.llamamos a la función abreVentana() que será la encargada de abrir el popup con la lista de prefijos.

.document. que es la que utiliza la referencia opener a la ventana "abridora". <html> <head> <title>Prefijos internacionales</title> <script> function ponPrefijo(pref){ opener.Ahora veamos la página HTML del popup. para actualizar el campo del formulario donde hay que colocar el prefijo.value = pref window.close() } </script> </head> <body> <h1>Lista de prefijos internacionales</h1> <form name=fprefijos> España: <input type="Button" value="+34" onclick="ponPrefijo('+34')"> <br> Holanda: <input type="Button" value="+31" onclick="ponPrefijo('+31')"> <br> Gran Bretaña: <input type="Button" value="+44" onclick="ponPrefijo('+44')"> <br> Estados Unidos: <input type="Button" value="+01" onclick="ponPrefijo('+01')"> <br> Bélgica: <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.formul.prefijo. Todos llaman a la función ponPrefijo() pasándole el prefijo seleccionado.

Para ello accede a la propiedad opener del objeto window. Para acceder a una variable miPopup. como si fuese un método nuevo del objeto ventana. Por ejemplo. Las variables se acceden como si fueran propiedades del objeto ventana.La función ponPrefijo() debe poner en un campo del formulario de la ventana que abrió el popup el valor del prefijo que ha recibido por parámetro. . En esta página abriremos una ventana secundaria desde la cual invocaremos a la función que inicializa los campos de texto. El ejemplo puede verse. Desde una ventana también tenemos acceso a las variables y funciones que hayamos declarado en otras ventanas. El código sería algo parecido a esto. El acceso a las variables y las funciones se realiza a través de los objetos ventana. desde un popup podemos controlar el estado de las variables de la página principal y llamar a funciones para hacer cualquier cosa que necesitemos. si deseamos desde una ventana tener acceso a una función de un popup colocaríamos su objeto ventana seguido de un punto y el nombre de la función a la que queramos acceder. Esperamos que haya resultado fácil de entender y sirva para ilustrar el modo de acceso desde el popup a la ventana padre. VII. Recordar que podéis ver en marcha el ejemplo en una página aparte.miVariable Para acceder a una función miPopup. Acceso a variables y funciones de otras ventanas Cómo tener acceso a variables y funciones que estén en otra ventana. al formulario y a la propiedad value del campo de texto donde hay que escribir el prefijo. Por último cierra el popup con el método close() del objeto window. para tener acceso a la ventana principal (abridora) y desde allí accede a su documento. Tenemos una página con un número cualquiera de campos de texto en un formulario y una función que sirve para inicializar los datos de los campos de texto a 0.miFunción() Vamos a ver un ejemplo para ilustrarlo. Gracias a esto.

value = "0" } var miPopup miPopup = window."miventana".i<document. <html> <head> <title>Inicializador de formularios</title> <script> function inicializaCampos(){ for (i=0.La página principal tendrá una parte con un script para definir la función y abrir el popup y otra parte con el formulario que contiene los campos de texto.i++) document.heig ht=70.html".forms[0]."width=308.forms[0].elements[i].elements. Se puede ver a continuación su código.length.open("llamadas-desde-ventanas-popup.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> .

Por su parte. La llamada a la función de la ventana "abridora" se realiza al pulsar un botón. vamos a ver un ejemplo sobre cerrar ventanas. Veamos el ejemplo en marcha y así comentaremos con más facilidad los códigos.opener. tendrá otro botón que cerrará la ventana secundaria.inicializaCampos() window.focus() } </script> </head> <body> <form> <input type="button" value="Llamar a función de otra ventana" onclick="llamadaOtraVentana()"> </form> </body> </html> VIII.opener. Luego de tratar este ejemplo comentaremos el caso especial de cerrar la ventana principal desde el popup y las pegas que tiene. Además. aun así. Si damos clic en el botón “Abrir ventana secundaria” . Es muy sencillo. la ventana secundaria tendrá un botón que permitirá cerrarse a ella misma. Para cerrar la ventana del navegador debemos utilizar el método close() del objeto window de la vetana que deseamos cerrar. Cerrar ventanas con Javascript Explicamos con detalle el proceso para cerrar ventanas del navegador mediante la programación Javascript. El ejemplo consta de una página que tiene un botón que abre una ventana secundaria o popup. <html> <head> <title>Popup Inicializador de formularios</title> <script> function llamadaOtraVentana(){ //llamada a la función de ventana abridora window.En el popup podremos encontrar el código necesario para invocar a la función inicializaCampos() que pertenece a la ventana principal.

Podemos cerrar la ventana secundaria haciendo clic en el botón de la página “Cerrar ventana secundaria” o haciendo clic en el botón “Cerrar” de la ventana Secundaria."miventana"."width=300.html". La página principal tendría 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. Lo utilizo para acceder al método close ventana_secundaria.open("cerrar_window2.height=200.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()"> .menubar=no" ) } function cerrarVentana(){ //la referencia de la ventana es el objeto window del popup.

en este caso cerrarla. el popup tiene un código como el siguiente. que hemos colocado dentro de un formulario. 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. cuando pretendiésemos utilizarla en la función cerrarVentana(). Como la referencia de la ventana se crea en la función abrirVentana() y luego se utilizará en la función cerrarVentana().</form> </body> </html> Contiene un script en la cabecera de la página con las funciones para abrir y cerrar la ventana. Por su parte. nos diría que esa referencia ya no existe.close() } </script> </head> <body> Esta es la ventana del popup <form> <input type=button value="Cerrar" onclick="cerrarse()"> </form> . Además. Para evitarlo podemos controlar que realmente la ventana está abierta antes de ejecutar el método close() de su objeto window. se debe guardar una referencia a la ventana que se acaba de abrir para poder realizar acciones sobre ella posteriormente. dicha referencia deberá declararse como global o de lo contrario sólo tendría validez mientras la función abrirVentana() estuviera ejecutándose y. pero esa es una práctica que veremos en ejercicios más adelante. Nota: Hay que señalar que puede haber un error javascript si se pretende cerrar la ventana antes de abrirla. como ya se indicó anteriormente en este manual. <html> <head> <title>Ventana Secundaria</title> <script> function cerrarse(){ window. Estas dos funciones se llaman desde dos botones de la página.

el método open() del objeto window. IX. sólo ocurre esto en navegadores modernos. Así que a partir de determinado navegador decidieron preguntar al usuario si realmente desea que se cierre esa ventana. en teoría. Una cosa más.</body> </html> Contiene tan solo una función para cerrarse ella misma. para evitar que un programador malicioso intente cerrar una ventana que hemos abierto nosotros como usuarios y que. En este ejemplo vamos a ir un poco más allá. más concretamente. 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. las cosas pueden variar de unos casos a otros. En el ejemplo anterior hemos visto cómo se cierran ventanas y es muy sencillo. porque ya tenemos un reportaje entero que explica detenidamente la apertura de ventanas secundarias y las características con las que las podemos abrir. la ventana que la abrió. ya que en Netscape 7 ya no preguntan si se desea de verdad cerrar la ventana. Por su parte. El ejercicio será el siguiente: . Vamos a realizar un pequeño ejemplo sobre cómo trabajar con ventanas secundarias o popups. Un detalle sobre cerrar ventanas En cualquier momento podemos cerrar una ventana secundaria utilizando el método close() del objeto window. 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. pero para las personas que nunca han experimentado con el trabajo con ventanas secundarias en Javascript. Para abrir esas ventanas se utiliza el lenguaje Javascript. En cualquier momento podemos cerrar una ventana. no tiene permiso para cerrar.open()) nos saldrá una caja de confirmación que pregunta al usuario si de verdad quiere cerrar la ventana. aunque actualmente le va a pasar a casi todos los usuarios. También hemos colocado un botón que se ha configurado para llamar a la función que cierra la ventana cuando se le haga clic. Nota: La caja de confirmación que hemos podido ver aparece como elemento de seguridad. No lo vamos a explicar aquí. que lo único que hace es ejecutar el método close() sobre su propio objeto window. que probablemente nunca hayamos visto. De todos modos. pero si intentamos cerrar una ventana que no se ha abierto con Javascript (sin utilizar window. 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. resultará sorprendente que el navegador haga esa pregunta. es decir. vamos a crear una ventana secundaria y desde ella vamos a acceder a las propiedades de la ventana padre. Es sólo un detalle que no tiene mucha importancia.

Cuando se pulse el botón abriremos un popup que contendrá una tabla con los colores puros de HTML. . un campo de texto vacío y un botón.Tendremos una página con fondo blanco. 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.

<html> <head> <title>Submenú en ventana a parte</title> <script language="JavaScript"> function lanzarSubmenu(){ window.Página padre La página original contendrá un simple formulario con un botón y un campo de texto."width=400. contendrá el script Javascript necesario para abrir la ventana secundaria. la ventana padre. que sirve para definir las acciones a ejecutar cuando se pulsa el botón.open("submenu_ventana2. pero la parte que nos importa a nosotros en este ejercicio es muy sencilla. en este caso una llamada a la función que abre la ventana secundaria. Para ello utiliza el método open() del objeto window. El objeto opener está disponible en las páginas que son ventanas secundarias y hace referencia a la ventana que la abrió. 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.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 función lanzarSubmenu() es la que contiene el script para abrir el popup."ventana1". El script que accede a la ventana padre es el siguiente: <script language="JavaScript"> . cuyo uso se describió en el artículo de Abrir ventanas secundarias. el objeto opener en la ventana popup es un sinónimo del objeto window en la ventana padre. Además. Dicho de otro modo.html".height=400. es decir. Lo único destacable es el atributo onclick del botón. Página secundaria La página secundaria es un poco más compleja. El formulario es de lo más normal.

"66".j<g. Popups DHTML – OpenPopups Sistema Javascript para crear popups DHTML. document. por medio de capas. colocados en una celda cada uno.opener.j++) { document."FF").value = miColor } </script> La función actualizaPadre() es la encargada de realizar el trabajo. como todos los demás objetos de la jerarquía Javascript."66"."FF"). <table width="80%" align="center" cellpadding="1" cellspacing="1"> <script language="javascript"> var r = new Array("00".i++) for (j=0. document. var b = new Array("00"."99". que no se pueden bloquear por los sistemas de bloqueo de popups. Como vemos. X. 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."33".k++) { var nuevoc = "#" + r[i] + g[j] + b[k]. . Recibe el código del color sobre el que se ha pulsado.write("<td bgcolor=\"" + nuevoc + "\" align=center><font size=1 face=verdana>")."99"."33". } document."99". for (k=0.function actualizaPadre(miColor){ window. Lo importante para nosotros ahora es entender que este script crea una tabla con todos los colores puros."CC".document.write("<tr>"). var g = new Array("00".document.k<b."FF")."66". document.write("<a href=\"javascript:actualizaPadre('" + nuevoc + "')\">").length.length. } </script> </table> Vista la complicación de este script y dado que no vamos a explicarlo todo otra vez. 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.i<r.write("</a></font></tr>").bgColor = miColor window.write(nuevoc)."CC". El resto de la página es parecido se puede ver a continuación. for (i=0."CC". el objeto opener también depende del objeto window de la página.colorin.forms[0]."33".length.opener.

existen métodos para mostrar popups que pueden resultar más complicados de bloquear. Se tienen que descomprimir los archivos que se descargan desde la web. El usuario es el responsable de permitir. La mayoría de las veces. en un directorio dentro de nuestro sitio web. a veces te muestra un mensaje de alerta cuando se intenta ejecutar un script en Javascript. se supone que hemos puesto este directorio en la raíz del directorio de publicación de la web. por lo que no se bloquean. que llamaremos por ejemplo "d_openpopups". OpenPopups Todo lo anterior sirva para presentar un script Javascript Open Source (gratuito y de código libre) para crear Popups DHTML. como los popups DHTML. pero muchos de nuestros sitios utilizan este sistema para mostrar información legítima que nuestros visitantes deberían conocer.js"></script> type="text/javascript" Donde "d_openpopups" debe ser el directorio donde hemos descomprimido los archivos. ya podemos accederlos desde cualquier página para mostrar popups DHTML. Recordemos que Internet Explorer. <script language="JavaScript" src="/d_openpopups/openpopups/openpopups.com hemos publicado algunos otros artículos sobre cómo hacer un popup DHTML. y cuando estos no los bloquean. Está en nuestro manual deTaller de CrossBrowser DHTML. porque seguro puede resultar muy interesante para nuestras páginas web. manteniendo la misma estructura de directorios. Merece la pena conocer este script.Todos sabemos ya que la mayoría de los navegadores disponen de sistemas para bloquear los molestos popups. . que son una emulación de las ventanas secundarias. En cualquier caso. pero utilizando la librería Cross-Browser. existen barras de navegación. Tan sólo los navegadores que tengan deshabilitado Javascript dejarán de mostrar estos popups. 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. pero que funciona por capas y HTML dinámico para mostrar u ocultar su contenido. Referencia: En DesarrolloWeb. como la de Google. Una vez están descomprimidos. lo primero es incluir el Javascript con la librería. depende de cómo esté configurado. Este tipo de popups no se tienen en cuenta como ventanas secundarias. Tal como está escrita la ruta hacia el script. ejecutar scripts en la página. Pueden ser de interesante lectura para quien quiera profundizar en el tema o encontrar otras posibilidades para realizar popups DHTML. o no. Para ello. estos popups son muy molestos y tenemos que celebrar que ahora la mayoría se puedan detectar y no permitir su apertura. que también bloquea la presentación de popups.

aunque no he visto explicado nada de esto en la documentación del producto. 3. A continuación. 3…) Si queremso que se muestre el icono para minimizar (1 para mostrarlo y 0 si no queremos que se muestre) 6. 2. 4. para ocultar los popups al cargar la página. 100. tenemos que añadir un evento onload en la etiqueta <body>. Si tuviéramos otros popups. 25). Si tenemos un solo popup DHTML llamaremos pasando un 1 como parámetro: hideDiv(1). Div3… Para acabar. En las siguientes líneas del código se especifican los directorios de las imágenes y los CSS: . deberíamos darles nombres con números consecutivos: Div2. <body onload="hideDiv()"> La función hideDiv() recibe el número de popups que vamos a utilizar en la página. 2. 5. Eso es para el popup 1. son los directorios de las imágenes y las declaraciones de estilos que utilizan los popups DHTML. 300. Título 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 (sólo el numero. Esos directorios vienen especificados en el archivo de scripts javascript llamado openpopups. le pasaremos un 5 como parámetro: hideDiv(5). La posición "top" de la ventana (el número de pixels que debe haber arriba de la ventana. Esa función se llama createWindow() y recibe varios parámetros: 1. Por ejemplo. La posición "left" de la ventana (el número de píseles a la izquierda de la ventana) 7.Luego. 0. Algo como: <div id="Div1"> Código del Popup </div> Hay que fijarse que la capa tiene como identificador (atributo id) "Div1". '#ffff88'. una llamada posible a esta función sería: createWindow('Título'. tenemos que hacer la llamada a la función Javascript que debe mostrar el popup. tenemos que crear las capas con el código fuente de los popups a mostrar. Si tenemos 5 popups DHTML. 1. Un detalle que a nosotros nos ha hecho falta cambiar para que todo funcionase correctamente. 1.js.

150.// CSS Diretory cssDir = "/d_styles/". Sería algo como esto: // CSS Diretory cssDir = "/d_openpopups/openpopups/styles/". 1. porque no he modificado la estructura de directorios del archivo de descarga. <form> <input type="button" value="Abrir Popup DHTML 1" onClick="createWindow('Ejemplo 1'. 40). uno por medio de un botón y otro por medio de un enlace."> Esta página muestra un par de popups DHTML. // Images Directory imageDir = "images/". En principio. '#ffff88'. apertura con un enlace: . Para que las rutas se encuentren. <br> <br> Esperamos que sean interesantes. // Images Directory imageDir = "/d_openpopups/openpopups/images/"."> </form> <p> Ahora veamos el ejemplo 2. no habría por qué tocar esas líneas. he tenido que colocar la estructura de directorios desde la raíz del dominio hasta las carpetas donde están los archivos CSS y las imágenes. según entiendo. <html> <head> <title>Ejemplo OpenPopups</title> <script language="JavaScript" type="text/javascript" src="/d_openpopups/openpopups/openpopups.js"> </script> </head> <body onLoad="hideDiv(2). 20. 1. pero si no las toco los ejemplos no funcionan correctamente. Código completo Vamos a mostrar el código de una página que tiene dos popups DHTML y con un par de métodos de carga de los popups.

href="http://www. background-color: #FFFF88. 0."> <b>Aquí pondríamos colocar tanto texto como queramos! Y todo tipo de contenido HTML! </div> <ul> <li>Con listas</li> <li>Enlaces</li> <li>Tablas</li> <li>. '#EEEEEE'. 165).<a href="#" onClick="createWindow('Anuncio MercadoProfesional. 468.mercadoprofesional.</li> </ul> </div> <div id="Div2"> <div align="center"><a target="_blank"><img src="mp468.com'. 2.com" width="468" height="60" border="0" Si hacemos clic en el botón “Abrir Popup DHTML 1” .">Abre el segundo popup</a> <div id="Div1"> <div style="border: 1px solid #ff8800. 240.. padding: 5px..gif" alt="MercadoProfesional.com"></a></div> </div> </body> </html> Se puede ver el ejemplo en marcha a continuación.

pueden ver la sección de JavaScript de DesarrolloWeb Para el ejemplo de este artículo se va a utilizar imágenes transparentes con distintos niveles de opacidad. Bueno. Explicación del Ejemplo: ¡¡Por fin!! La parte buena de este artículo. no es una ventana emergente como tal... . firework. Efecto para inhabilitar/habilitar el fondo de la Página En este artículo se explica como crear un efecto para hacer que se muestre una ventana emergente y que el fondo de la página quede desactivado.pueden ver la sección de HTML de DesarrolloWeb CSS .) para crear las imágenes transparentes a tu gusto. En caso de que no tengas un editor de imágenes. es más bien un simulacro pero que hace las veces de ventana emergente y sin peligro de que el navegador te bloquee dicha ventana. por lo cual es necesario que sepas utilizar un editor de imágenes (photoshop.pueden ver la sección de CSS de DesarrolloWeb JavaScript .Ahora si hacemos clic en el enlace “Abre el segundo popup” XI. Es necesario tener conocimientos (por lo menos básicos) de: HTML . puedes utilizar las del ejemplo sin ningún problema. .

bla. A estas capas le he aplicado código CSS y en principio todas están ocultas. bla. bla. El código es más sencillo de lo que parece: Usé una tabla principal para maquetar una "ventanita de información" exacta a las del sistema operativo Windows XP. bla. bla. bla. bla.<br> Este es el contenido del primer párrafo. bla. bla. bla. bla. Esta es la única diferencia significativa entre los 3 párrafos (el llamado a la función JavaScript). bla. bla. La capa capaVentana es la más compleja de todas y es porque en ella está el código de lo que he llamado "ventana emergente". Con esto finalizo lo que sería la explicación del cuerpo del Html. la forma en que diagramé la página para lograr el efecto deseado: . bla. bla. bla. bla. bla. bla. bla. bla.">Simulacro de ventana Emergente 1</a> <p> Una vez que hayas visto los 3 párrafos en el código del ejemplo. lo que verás a continuación son 4 capas (div) llamadas capaVentana. el cuerpo principal (body) del archivo Html del ejemplo. bla.A muy grosso modo. bla.<br> Este es el contenido del primer párrafo. bla. bla. bla. y en la celda central. Las otras capas no tienen absolutamente nada. bla. logrando así que se vea cargada de información. es decir. bla. El código del primer párrafo es el siguiente: <p> Este es el contenido del primer párrafo. en donde a cada celda le asigné una imagen. bla. bla.<br> Este es el contenido del primer párrafo. bla. bla. Al final de cada párrafo hay un enlace el cual es el encargado de mostrar la ventana emergente a través de código hecho en JavaScript . bla. bla. bla. Más adelante veremos por qué. bla. capaFondo1. bla.<br> <a href="javascript:abrirVentana('1'). bla. bla. bla. bla. capaFondo2 y capaFondo3. está compuesto por 3 párrafos los cuales tienen la finalidad de llenar la página. bla. bla. es importante conocer la arquitectura de la página. hice otra tabla donde coloqué el mensaje de la ventanita y el botón de Aceptar. bla. bla. bla. bla. Antes de explicar los códigos que hice en JavaScript. bla.

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

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

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” .