fprieto.es

Uso correcto de ventana popup con javascript

Seguramente muchos hemos usado javascript para abrir una ventana de tipo “popup” con unas determinadas características. He aquí la forma correcta de hacerlo, a fin de que los buscadores puedan rastrear el link creado:

MAL:
<a href="javascript:window.open(URL, VENTANA, PROPIEDADES_VENTANA);">LinkAlicante</a>

BIEN:
<a href="http://www.linkalicante.com" mce_href="http://www.linkalicante.com" target="ventana1" onClick="window.open(this.href, this.target, PROPIEDADES_VENTANA); return false;">LinkAlicante</a>

En el primer caso, estamos llamando a javascript a través de la propiedad href. Los buscadores no pueden rastrear un enlace de este tipo. Además el link no funcionará si el navegador no tuviera javascript activado.En el segundo caso, EL CORRECTO, se solucionan ambos problemas. El enlace tiene un HREF y un TARGET normales. En la propiedad “onClick“, que se activa al pinchar sobre el enlace, es donde añadimos el comportamiento extra, llamando a la “window.open” a fin de que la ventana se abra con las propiedades deseadas

“this.href” hace referencia al contenido de la propiedad href del enlace, lo mismo que “this.target”. El que no tenga claro estos conceptos, debería repasar un poco de Programación Orientada a Objetos

PROPIEDADES DE LA VENTANA:
(esta última parte del post ha sido extraída de: http://www.desarrolloweb.com/articulos/18.php) No obstante la forma en que se definen los enlaces en esta página no es la correcta.

• Width. Ajusta el ancho de la ventana. En pixels
• Height. Ajusta el alto de la ventana
• Top. Indica la posición 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.
• Left. Indica la posición 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.
• Scrollbars. 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 Firefox).
• Resizable. Establece si se puede o no modificar el tamaño de la ventana. Con resizable=YES se puede modificar el tamaño y con resizable=NO se consigue un tamaño fijo.
• Directories (barra directorios). 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, como podría ser la barra de menús 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.
• Location (barra direcciones)
• Menubar (barra de menús)
• Status (barra de estado)
• Titlebar (la barra del título)
• Toolbar (barra de herramientas)

Enlace de prueba con popup javascript:
LinkAlicante (abrir en ventana nueva)