Cómo abrir correctamente una nueva ventana (popup) con javascript

En este artículo veremos cómo abrir correctamente una ventana nueva o popup utilizando javascript.

Aunque la mayoría de las webs que visitamos abren popups, sólo unas pocas de ellas lo hacen de la forma correcta, esto es, respetando los estándares html y las reglas básicas de accesibilidad.

Es importante utilizar siempre código correctamente formado en nuestras páginas ya que por ejemplo, los popups que se crean de la forma incorrecta, no son accesibles para los navegadores sin javascript o para los robots de los buscadores.

A continuación os dejo un par de ejemplos sobre cómo NO incluir NUNCA un popup:

<a href="#" onclick="window.open('pagina.htm','popup','width=400,height=250')">Mi popup mal hecho</a>

<a href="javascript:window.open('pagina.htm','popup','width=400,height=250')">Mi otro popup ma hecho</a>

La forma correcta de utilizar el elemento 'a' (Anchor) de html pasa por incluir siempre una url válida para su atributo href. De esa forma, tanto navegadores sin javascript como los buscadores podrán acceder a ella sin ningún problema.

Sabiendo esto, a continuación vemos el ejemplo correcto de incluir un popup en nuestras páginas:

<a href="pagina.htm" target="_blank" onclick="window.open(this.href,this.target,'width=400,height=250');return false;">Mi popup mal hecho</a>

Otro pequeño detalle sobre el ejemplo anterior es la inclusión de la sentencia 'return false' al final del código del evento onclick. Esto evitará se produzcan saltos en el la página y algun otro efecto al pulsar sobre el enlace.

¿Y eso es todo?

Pues no, eso no es todo. Ahora vamos a ver qué opciones de personalización tenemos a la hora de abrir un popup en javascript.

Como ya hemos visto, para abrir un popup utilizaremos el método open del objeto window (window.open), que recibe 3 parámetros:

window.open(url, name, parametros)

• En primer lugar recibe la url de la nueva ventana o popup.
• En segundo lugar recibe el target o nombre de la nueva ventana.
• Y por último, la parte que nos interesa. El tercer parámetro es una lista de elementos separados por comas que nos servirán para personalizar un poco nuestro nuevo popup.
  Algunos elementos que podrían ser interesantes en este punto son:
  
  • width=pixeles: el ancho en píxeles del nuevo popup.
  • height=pixeles: el alto en píxeles del nuevo popup.
  • toolbar=yes|no: indica si se muestra o no la barra del navegador.
  • location=yes|no: indica si se muestra o no la barra de direcciones.
  • status=yes|no: indica si se muestra o no la barra de estado.
  • menubar=yes|no: indica si se muestra o no la barra de menú.
  • scrollbars=yes|no: indica si se muestran o no las barras de scroll.
  • top=pixeles: indica la posición de la ventana desde su borde superior hasta la parte superior de la pantalla.
  • left=pixeles: indica la posición de la ventana desde su borde izquierdo hasta la parte izquierda de la pantalla.

Os incluyo un ejemplo completo donde se indica alto, ancho y posición del popup y no se incluye ninguna barra:

<a href="pagina.htm" target="_blank" onclick="window.open(this.href,this.target,'width=400,height=250,top=120,left=100,toolbar=no,location=no,status=no,menubar=no');return false;">Mi popup mal hecho</a>

Y eso es todo, espero que os haya gustado.