En este artículo vamos a hablar de popups, o ventanas secundarias, o emergentes. Es algo que se consigue desde Javascript con el método window.open(). Es una práctica habitual, pero de de la que no debemos abusar, porque este tipo de comportamiento se consideran habitualmente como intrusivos para los usuarios.

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, o para realizar algún tipo de diálogo con el usuario. Por ejemplo, una situación común es abrir la típica ventana para compartir un post en redes sociales.

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, posicionadas en un lugar determinado y con más o menos menús de navegador.
• 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

Esto no es Javascript y probablemente no sea lo que estás buscando. Pero 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 se presente el la ventana llamada xxx o en el frame xxx.

El enlace tendría esta forma:

<a href="mipagina.html" target="_blank">Abre el enlace en una nueva ventana</a>

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á cono el usuario tenga definido por defecto en su navegador.

Abrir una ventana secundaria con Javascript

Para abrir una ventana con Javascript podemos utilizar la instrucción window.open(). No pasa nada por que 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.

El método 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.

URL: Representa el URL que deseamos abrir en la ventana secundaria (por ejemplo http://www.desarrolloweb.com). Puedes abrir URLs de páginas que estén en tu dominio o en dominios externos.

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 página inicial de desarrolloweb.com en una ventana secundaria a la que vamos a llamar ventana1. Además, la ventana será de 120 pixels de ancho, 300 de alto y no tendrá barras de desplazamiento.

Una aclaración adicional, 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), este enlace se mostrará en la ventana secundaria.

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

El script es sencillo, veámoslo a continuación:

<script> 
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 página que queramos abrir, sino a la sentencia Javascript necesaria para abrir 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. El enlace llama a la función que abre la ventana

Ahora Veamos cómo quedaría todo ese enlace en la página.

<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 parámetro de la función 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.

Parámetros para dar forma a una ventana emergente

Estos atributos los puedes utilizar en la función window.open() para definir la forma que deseas que tenga tu ventana secundaria.

Abrir una ventana sin un enlace

En otras ocasiones desearemos abrir una ventana secundaria automáticamente, es decir, sin necesidad de que el usuario pulse sobre ningún enlace. En este caso, 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. Esta línea a añadir 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.open(URL,"ventana1","width=120,height=300,scrollbars=NO") 
} 

ventanaSecundaria("http://www.desarrolloweb.com"); 
</script>

Queda en negrita lo que sería la llamada a la función que abre la ventana secundaria, como está fuera de una función se ejecuta según se está cargando la página.